没有画布的HTML5 getImageData

Bry*_*ams 5 javascript jquery html5

有没有办法在没有画布的情况下使用图像的getImageData?我想要在图像的鼠标位置获得像素颜色.

Den*_*ret 9

不,你不能.

但是获取imageData可以使用内存中的画布来完成,这很快捷:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('someImageId');
context.drawImage(img, 0, 0 );
var theData = context.getImageData(0, 0, img.width, img.height);
Run Code Online (Sandbox Code Playgroud)

您可以保留theData变量,这样您就不必在每次单击时构建变量.

请注意,如果图像来自另一个域,则此操作无效(因此,如果使用file://而不是使用打开html文件,则无效http://).

  • 这是为了防止XSS攻击.阅读[this](http://en.wikipedia.org/wiki/Cross-site_scripting)和[this](https://developer.mozilla.org/en-US/docs/HTTP_access_control). (3认同)