1

次の問題があります: (fillRect メソッドを使用して) 四角形を描画してから (drawImage を使用して) イメージを描画すると、getImageData を使用して Contex から正しい結果を取得できません。drawImage で行にコメントを付けると、正しく動作します。問題はどこだ？

var img=document.getElementById("img");
var canvas=document.getElementById("can");
var ctx=canvas.getContext('2d');

ctx.fillStyle="red";
ctx.fillRect(0,0,50,50);
ctx.drawImage(img, 0, 0, 19, 19); //;(

var imgData=ctx.getImageData(0,0,50,50);
ctx.putImageData(imgData,100,100);

問題: http://jsfiddle.net/yX5mj/1/

4

1 に答える 1

1

コンソールを見ると、次のエラーが表示されます。

キャンバスが汚染されているため、キャンバスから画像データを取得できません
クロスオリジンデータによる。

したがって、画像が悪意のある可能性があるため、データを読み取りたくありません。これを防ぐには、サーバーで画像をホストするか、必要な画像を base64 エンコードしてページに埋め込みます。

ここで base64 エンコーディングの例を見ることができ、インターネット上で base64 エンコーダーを見つけることができます。

于 2013-03-19T15:08:02.950 に答える