1

私のコードのアイデアは、画像をロードする隠しdivを作成することです。ロードイベントが発生したら、キャンバスに描画します。コードを実行すると、このエラー0x80040111（NS_ERROR_NOT_AVAILABLE）が発生しますが、ロードイベントを待機しています。これが私のコードです。

HTML

<div id="old-counties-image-wrapper" style="display: none;">
<img border="0" height="390" id="interreg-iiia-old-counties-map" src="/f/MISCELLANEOUS/old-map.jpg" /></div>
<p>
<canvas id="old-counties-image-canvas"></canvas></p>

およびjavascript

 $('#interreg-iiia-old-counties-map').load(function() {
    var canvas=document.getElementById('old-counties-image-canvas');
    if (canvas.getContext) {
         var ctx=canvas.getContext('2d');
         var img=$('#interreg-iiia-old-counties-map');
         ctx.drawImage(img, 0, 0);
    }
    //else {
    //    $('#old-counties-image-wrapper').show();
    //}
   });

elseの部分は今のところコメントアウトされていますが、canvasをサポートしていないブラウザ用にあります。

4

2 に答える 2

4

$('#interreg-iiia-old-counties-map')は jQuery オブジェクトを返しますが、drawImageメソッドはオブジェクトを受け取ります。jQuery Image( $) 関数は、元の要素をラップして通常の jQuery 関数を提供する jQuery オブジェクトを返します。

メソッドを使用して基になるImageオブジェクトを取得できますgetが、この場合は、関数にthis提供されるコールバック関数のコンテキストでloadは、元の$('#interreg-iiia-old-counties-map')DOM 要素である を使用する方が簡単です。言い換えると、

ctx.drawImage(this, 0, 0);

ここでうまくいくはずです。また、隠し<img>要素を使用する必要はありませんnew Image。ここで行っているのと同様の画像を取得できます。

var img = new Image(), 
    canvas = document.getElementById('old-counties-image-canvas');
img.src = '/f/MISCELLANEOUS/old-map.jpg';

img.onload = function(){
    if (canvas.getContext) {
         var ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0);
    }
};
于 2011-01-19T10:55:45.217 に答える
0

そして、今、私自身の解決策として：

var imgId = $("#myDiv img").attr("id");
var imgObj = document.getElementById(imgId);
var canvasContext = $("#imgCanvas")[0].getContext('2d');
canvasContext.drawImage(imgObj, 0, 0);

醜いですが、上記のソリューションよりもはるかに醜いとは思いません。他のソリューションにもパフォーマンス上の利点があるかもしれませんが、これはサーバーのファイル システムからイメージ ファイルをロードする必要がないように思われます。Chrome、Firefox、IE10 でテストしました。

于 2013-08-14T00:32:46.840 に答える