Rappid - PNG with Background Image
joint.ui.Raster plugin: PNG export with background image.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="http://taxflowcharts.com/rappid/build/rappid.min.js"></script>
<link rel="stylesheet" href="http://taxflowcharts.com/rappid/build/rappid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!-- Rappid Fiddle -->
<button id="print">print</button>
<div id="paper"></div>
CSS
#paper {
display: inline-block;
border: 1px solid gray;
}
JavaScript
// getTransformToElement pollyfill for older version of rappid.
SVGElement.prototype.getTransformToElement = (function() {
var polyfill = function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
if (typeof SVGGraphicsElement !== 'undefined') {
return SVGGraphicsElement.prototype.getTransformToElement || SVGElement.prototype.getTransformToElement || polyfill;
} else {
return SVGElement.prototype.getTransformToElement || polyfill;
}
}());
// background image
var bgDataUri =...