javascript - Canvas 导出为 png 不导出 backgroundImage

Question

我正在尝试导出 Canvas 的最终渲染，一切正常，当我设置 SVG backgroundImage 在导出时完全忽略时出现异常。

这是我设置背景图片的方式

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();
});

这就是我导出所有内容的方式

window.open(canvas.toDataURL()); 

Answer 1

您的示例在 Chrome 和 Firefox 中对我来说工作正常，但在 Internet Explorer 中失败。

Chrome 和 Firefox 可以在 Canvas 上导出 SVG 绘图。

如果您将 SVG 绘制到 Canvas ，Internet Explorer 将关闭 canvas.toDataURL。

这是出于安全原因——防止通过导出在 Canvas 上绘制的 secret 信息来窃取用户信息。在新版本的 IE 中可能会取消此限制，但目前在 IE 中您无法将 SVG 绘制到 Canvas ，然后使用 .toDataURL 导出 Canvas 。

最简单的解决方法是将您的 SVG 背景转换为 .png 或 .jpg 格式。如果背景图像采用这些格式，Internet Explorer 将允许 .toDataURL。

[关于决议的每条评论的补充]

网页图像(以及页面视口(viewport)上的所有内容)始终以像素表示。

如果您想导出 Canvas 进行打印(需要比屏幕 Canvas 更高的像素数)，那么您可以使用 FabricJS 的 toDataURLWithMultiplier 方法，该方法会增加导出的 dataURL 上的像素数量.它的工作原理是采用单个像素并创建一组 2x2 的相同像素(或 3x3 等)。关于 toDataURLWithMultiplier 的链接: http://fabricjs.com/docs/fabric.StaticCanvas.html .

这样您就可以用更大的 .png 图像替换 SVG 图像。如前所述，使用 .png 代替 SVG 是目前最好的跨浏览器解决方案。 ;-)