1

私の生地のキャンバスには、背景としての画像と、キャンバス内の 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 キャンバスを静的キャンバスに変更すると、すべてが機能します。クロムで画像として保存すると、画像として表示されます。

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

//instead of 

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

FabricJS のインタラクティブ機能が必要なため、通常のキャンバスで機能させるにはどうすればよいでしょうか。

4

0 に答える 0