Canvas导出到png不会导出backgroundImage

Question

I am trying to export my final render of canvas everything works just fine exception when i set an SVG backgroundImage is completely ignored on export.

This is how i set the background image

fabric.Object.prototype.transparentCorners = true;
fabric.loadSVGFromURL(svg, function (objects, options) {        
    var group = fabric.util.groupSVGElements(objects, options);
    group.set({
        left: 0,
        top: 0,
        scaleY: 1.2,
        scaleX: 1.2,
        fill : front_color
    });
    //canvas.add(group);
    canvas.setBackgroundImage(group, canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5,
        backgroundImageStretch: true,
        color: front_color,
        repeat: 'repeat'
    });
    canvas.setBackgroundColor(fill_color);
    canvas.renderAll();
});

and this is how i export everything

window.open(canvas.toDataURL()); 

Answer 1

Your example works fine for me in Chrome & Firefox, but fails in Internet Explorer.

Chrome and Firefox are fine with exporting SVG drawings on the canvas.

Internet Explorer will turn off canvas.toDataURL if you draw SVG to the canvas.

This is for security reasons--to prevent stealing user's info by exporting their secret info drawn on a canvas. This restriction may be lifted in new version of IE, but for now in IE you can't draw SVG to the canvas and then export the canvas with .toDataURL .

The simplest workaround is to convert your SVG background into .png or .jpg format. Internet Explorer will allow .toDataURL if the background image is in those formats.

[ Addition per comment about resolution ]

Webpage images (& everything on the page viewport) are always denoted in pixels.

If you want to export the canvas for printing (which needs a higher pixel count than your on-screen canvas) then you can use FabricJS's toDataURLWithMultiplier method which increases the amount of pixels on the exported dataURL. It works by taking a single pixel and creating a 2x2 set of the same pixel (or 3x3, etc). Link about toDataURLWithMultiplier : http://fabricjs.com/docs/fabric.StaticCanvas.html .

That would let you substitute a larger .png image for your SVG image. As noted previously, using .png instead of SVG is currently the best cross-browser solution. ;-)