Canvas 导出为 png 不导出 backgroundImage

Question

我正在尝试导出 canvas 的最终渲染，一切正常，但当我设置 SVG 背景图像时，导出时完全忽略。

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

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 上绘制的秘密信息来窃取用户信息。新版本的 IE 可能会取消此限制，但目前在 IE 中您无法将 SVG 绘制到 canvas，然后使用 .toDataURL.

导出 canvas

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

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

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

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

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

Canvas 导出为 png 不导出 backgroundImage

Canvas export to png does not export backgroundImage

javascript

jquery

svg

canvas

fabricjs