将 FabricJS 画布导出为 PNG/JPG，其中包含图像答案

【问题标题】：Export FabricJS canvas to PNG/JPG with Images in it将 FabricJS 画布导出为 PNG/JPG，其中包含图像
【发布时间】：2016-11-05 04:26:54
【问题描述】：

这是我使用 FabricJS 将 Canavs 导出到 Image 的代码：

window.open(canvas.toDataURL( {format: 'jpeg' }));

添加图片的代码如下：

fabric.Image.fromURL('URL here', function(img) {
var oImg = img.set({ left: 50, top: 100,}).scale(0.5);
        canvas.add(oImg).renderAll();
        canvas.setActiveObject(oImg);
});

它适用于文本和形状，但在将外部图像添加到画布时会显示 .htm 文件。

没有明确的错误，只是错误的输出。

我该如何解决这个问题？

【问题讨论】：

您能否提供有关您的问题或代码 sn-p 的更多信息？尝试代码时控制台中是否有任何错误？
我已经更新了问题，请看一下。但是控制台中没有错误。只是输出错误。
添加图片时，尝试添加 {crossOrigin: 'anonymous'} 作为 fromURL 的第三个参数。如果这不起作用，您是否查看过 toDataURL 的文本输出？
太好了，效果很好。谢谢你。但是还有一个问题，我在设置Canvas后台使用：canvas.setBackgroundColor({source:"Image source"}, canvas.renderAll.bind(canvas));如何在后台添加crossOrigin？

标签： fabricjs

【解决方案1】：

要设置背景，请改用canvas.setBackgroundImage。您可以为其提供一个织物图像作为第一个参数，如果使用 crossOrigin 方法加载，应该可以避免使用背景时发生的问题。

fabric.Image.fromURL('http://lorempixel.com/g/400/200/', handleImage, {crossOrigin: 'anonymous'});

function handleImage(img) {
    canvas.setBackgroundImage(img);
    // do whatever extra needs to be done for the background
}

http://fabricjs.com/docs/fabric.Canvas.html

http://scanova.io/blog/engineering/2014/06/09/fabric-js-slow-rendering-issues-cors/

【讨论】：