Question

我的Fabric画布有一个图像作为背景，另一个图像来自画布中的url。

var canvas = new fabric.Canvas('resultCanvas');

 canvas.setBackgroundImage('someUrl/background.jpg', canvas.renderAll.bind(canvas), {
        backgroundImageOpacity: 0.5,
        backgroundImageStretch: false
    });

 fabric.Image.fromURL('someUrl/image.jpg', function (oImg) {
        oImg.left(100).oImg.top(100);
        canvas.add(oImg);
    });

现在我需要让这个画布成为一张在Facebook上分享的图片。

我只需点击一下按钮就可以从fabricJS尝试toDataUrl（）函数，但它会给出一个空白图像。

canvas.toDataURL({
        format: 'jpeg',
        quality: 0.8
    });

即使在Chrome中右键单击画布时获得的另存为图像功能也会显示空白图像。

我尝试将其序列化为JSON和SVG，但它们也提供了一个空白画布。我还尝试通过ajax将图像数据上传到服务器并将其保存为服务器上的图像。我也在服务器上得到一张空白图片。

但是，如果我将FabricJS画布更改为静态画布，如下所示，一切正常。当您在chrome上保存为图像时，它会显示为图像。

var canvas = new fabric.StaticCanvas('resultCanvas');

//instead of 

var canvas = new fabric.Canvas('resultCanvas');

那么我应该怎么做才能使它在常规画布上工作，因为我需要FabricJS的交互功能。

使用FabricJS将Canvas作为图像共享

0 个答案: