0

キャンバスを使用して、dom 要素の背景画像のセクションをキャンバス タグに描画しようとしています。これが私が今持っているものです。

var draw = function( data ){
    var canvasStr = '<canvas id="highlight" width='300' height='200'></canvas>' 
    var canvasEl = $(canvasStr).appendTo( wrapper );
    var context = canvasEl.get(0).getContext('2d');
    var imgSource = wrapper.find('.invoice').get(0);
    context.drawImage(imgSource, 0, 0, 300, 200);
}

jquery から直接 imageSource を読み取ることができないようです。これを機能させるにはどうすればよいでしょうか。

4

1 に答える 1

0

試す

context.drawImage(imgSource[0], 0, 0, 300, 200);

画像オブジェクトではなく、jquery オブジェクトを drawImage に渡します。また、キャンバスに描画する前に、画像が読み込まれていることを確認してください。

編集：

申し訳ありませんが、画像が背景画像であることに気付きませんでした。その場合、背景画像のソースから新しい画像を作成する必要があります。このようなもの...

var img = new Image();
img.src = $(wrapper.find('.invoice').get(0)).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
img.onload = function() {
    context.drawImage(img, 0, 0, 300, 200);
};

画像が読み込まれていることを確認するという意味がわかりますか? 画像はネットワーク経由でロードするのに時間がかかるため、ソースを設定してもすぐには利用できません. 画像を描画できるようにするには、onload ハンドラーを設定する必要があります。

于 2012-08-06T21:03:31.990 に答える