0

コラージュ作成アプリを作成しています。

Canvasのコードです。キャンバスの背景に画像が表示されています。

<canvas id="c" width="800" height="600" style="left: -300px; background-image: url('_include/img/Images/rainy_day-1366x768.jpg');"></canvas>

しかし、Create Collageボタンをクリックすると背景が透明になります。背景画像でキャンバスをキャプチャするにはどうすればよいですか?

ボタンクリックコード:

function convertCanvasToImage() {
                    var canvas = document.getElementById('c');
                    var image_src = canvas.toDataURL("image/jpeg");                     
                    window.open(image_src);
                }

同様の質問を参照したところ、キャンバスを使用または配置できることがわかりました。それをどのように実装できるかわかりません。Create Collageボタンをクリックすると、背景がキャプチャされますか? 私はそれについてはよく分かりません。私は Fabric.js を使用しています。

4

2 に答える 2

4

できません！CSS の背景はキャンバスの一部ではありません (他の要素の背景としての要素のみ)。

によって取得される唯一のデータであるため、CSS 背景として使用する代わりに、背景をキャンバスに描画する必要がありますtoDataURL()。

キャンバスを使用clearRectまたは更新する場合は、代わりに背景画像を使用することを検討できます。fillRectdrawImage

于 2013-07-02T13:23:55.223 に答える
-1

html2canvas スクリプトを使用することをお勧めします。

コードは次のようになります。

html2canvas($("#c"), {
    onrendered: function(canvas) {
        var Image1 = canvas.toDataURL("image/jpeg");
        window.open(Image1);
    }
于 2013-07-02T12:09:22.447 に答える