Question

我正在尝试导出我的最终渲染画布一切正常，当我设置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＆amp; Firefox，但在Internet Explorer中失败。

Chrome和Firefox可以在画布上导出SVG图纸。

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

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

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

[关于决议的评论添加]

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

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

这样可以用较大的.png图像替换SVG图像。如前所述，使用.png而不是SVG是目前最好的跨浏览器解决方案。 ; - ）

Canvas导出到png不会导出backgroundImage

1 个答案: