有可能像使用getImageData/putImageData的canvas一样使用html图像吗？

我想知道是否有一种方法可以动态修改/访问html图像中包含的数据,就好像它们是html5 canvas元素一样.使用canvas,你可以在javascript中使用getImageData()和putImageData()访问原始像素数据,但到目前为止我还没有弄清楚如何用图像来做这件事.

// 1) Create a canvas, either on the page or simply in code
var canvas = document.createElement('canvas');
var ctx    = canvas.getContext('2d');

// 2) Copy your image data into the canvas
var myImgElement = document.getElementById('foo');
ctx.drawImage( myImgElement, 0, 0 );

// 3) Read your image data
var w = myImgElement.width, h=myImgElement.height;
var imgdata = ctx.getImageData(0,0,w,h);
var rgba = imgdata.data;

// 4) Read or manipulate the rgba as you wish
for (var px=0,ct=w*h*4;px

请注意,步骤2也可以从直接加载到脚本中的图像中引入,而不是在页面上:

// 2b) Load an image from which to get data
var img = new Image;
img.onload = function(){
  ctx.drawImage( img, 0, 0 );
  // ...and then steps 3 and on
};
img.src = "/images/foo.png"; // set this *after* onload

        
请注意，浏览器现在具有跨域安全限制，该限制是在将来自域外部的图像数据写入画布后，从“画布”获取数据。例如，Chrome的消息显示为“无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨域数据污染。” 

2> Alex Barrett..：
您可以使用drawImage()将图像绘制到canvas元素,然后从画布中获取像素数据.

        
一旦将图像复制到`canvas`元素,您就可以以任何方式操纵它来正常操作`canvas`像素数据. 
这不允许我操纵图像数据本身,这就是我想要做的.