画布导出为 png 不导出背景图片

Question

我正在尝试导出画布的最终渲染，当我设置 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 可以很好地在画布上导出 SVG 绘图。

如果您在画布上绘制 SVG，Internet Explorer 将关闭 canvas.toDataURL。

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

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

[每条关于分辨率的评论添加]

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

如果您想导出画布进行打印（这需要比屏幕上的画布更高的像素数），那么您可以使用 FabricJS 的 toDataURLWithMultiplier 方法，该方法会增加导出的 dataURL 上的像素数。它通过获取单个像素并创建相同像素（或 3x3 等）的 2x2 集来工作。关于toDataURLWithMultiplier的链接： http://fabricjs.com/docs/fabric.StaticCanvas.html.

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