Question

这是我使用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文件。

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

如何解决此问题？

Answer 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/

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

1 个答案: