1

背景画像を持つ HTML5 キャンバス要素があります。ユーザーは画像に描画することが許可されており、完全なキャンバス要素を背景とともに保存する必要があります。一部を保存するために以下のコードを使用していますが、キャンバスの描画のみを取得し、背景画像は取得しません。背景画像も取得するにはどうすればよいですか？

var canvas = document.getElementById('your_canvas');
             var context = canvas.getContext('2d');
             // save canvas image as data url (png format by default)
             var dataURL = canvas.toDataURL();

             // set canvasImg image src to dataURL
             // so it can be saved as an image
             document.getElementById('canvasImg').src = dataURL;

アップデート：

私のHTML

<div name='coords1' class='canvas-area input-xxlarge' disabled
placeholder='Shape Coordinates' id='imgDiv'
data-image-url='BackGround.jpg'></div>

HTMLページに上記のdivがあります。次に、キャンバスを動的に作成して描画します。少し長いコードです。

4

2 に答える 2

1

で画像を使用しないでください。div画像をcanvas..

次のコードを使用してキャンバスに画像を描画し、

var img=new Image();
img.src=/*image src*/;
var ctx=canvas.getContext("2d");
img.onload=function()
{
    ctx.drawImage(img,x,y,width,height);
}

コールバックで画像描画が完了した後img.onload、ユーザーがキャンバスに描画できるようにします...

キャンバスの描画を保存します....

于 2013-03-15T18:53:10.550 に答える
0

背景画像付きのキャンバスを取得するには 

context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);
于 2013-03-14T05:04:02.267 に答える