読者です 読者をやめる 読者になる 読者になる

クロスドメイン画像はピクセル操作できない

JavaScript HTML

HTML Canvasでクロスドメイン画像のピクセルを加工することはできない。

クロスドメインの画像をdrawImageすることはできる。しかし、クロスドメイン画像をdrawImageしたcanvasからgetImageDataしようとするとエラーになる。

$("<img>").attr("src", "http://www.hatena.ne.jp/users/pa/paulownia/user.jpg").load(function(){
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    var c = canvas.getContext('2d');
    c.drawImage(this, 0, 0, this.width, this.height);       // これはOK
    var pixels = c.getImageData(0, 0, c.width, c.height);   // これはだめ、エラー
});

Firefox3.6、Safari4、Chrome5、Opera10すべてエラー、どうやらcanvasのセキュリティ仕様のようだ。

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

toDataURL等もエラーになるらしい。