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等もエラーになるらしい。