1

我的 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 的交互功能。

4

0 回答 0