可以在 getImageData / putImageData 中使用像画布这样的 html 图像吗？

possible to use html images like canvas with getImageData / putImageData?

提问by Ahi Tuna

I'd like to know if there is a way to dynamically modify/access the data contained in html images just as if they were an html5 canvas element. With canvas, you can in javascript access the raw pixel data with getImageData() and putImageData(), but I have thus far been not able to figure out how to do this with images.

我想知道是否有办法动态修改/访问 html 图像中包含的数据，就像它们是 html5 canvas 元素一样。使用画布，您可以在 JavaScript 中使用 getImageData() 和 putImageData() 访问原始像素数据，但到目前为止我还无法弄清楚如何对图像执行此操作。

回答by Phrogz

// 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<ct;px+=4){
  var r = rgba[px  ];
  var g = rgba[px+1];
  var b = rgba[px+2];
  var a = rgba[px+3];
}

// 5) Update the context with newly-modified data
ctx.putImageData(imgdata,0,0);

// 6) Draw the image data elsewhere, if you wish
someOtherContext.drawImage( ctx.canvas, 0, 0 );

Note that step 2 can also be brought in from an image loaded directly into script, not on the page:

请注意，步骤 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

回答by Alex Barrett

You could draw the image to a canvas element with drawImage(), and then get the pixel data from the canvas.

您可以使用drawImage()将图像绘制到画布元素，然后从画布中获取像素数据。

回答by Alric

After having some issues with this code, I want to add one or two things to Phrogz's answer :

在此代码出现一些问题后，我想在 Phrogz 的回答中添加一两件事：

// 1) Create a canvas, either on the page or simply in code
var w = myImgElement.width, h=myImgElement.height; // NEw : you need to set the canvas size if you don't want bug with images that makes more than 300*150

var canvas = document.createElement('canvas');
canvas.height = h;
canvas.width = w;
var ctx    = canvas.getContext('2d');

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

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

// And then continue as in the other code !

回答by fgalliat

that worked for me (IE10x64,Chromex64 on win7, chromium arm linux, ...seems to bug with firefox 20 arm linux but not sure ... to re-test)

对我有用（IE10x64，win7 上的 Chromex64，chrome arm linux，......似乎在 firefox 20 arm linux 上有问题，但不确定......重新测试）

--html--

--html--

<canvas id="myCanvas" width="600" height="300"></canvas>
<canvas id="myCanvasOffscreen" width="1" height="1"></canvas>

-- js --

-- js --

  // width & height can be used to scale image !!!
  function getImageAsImageData(url, width, height, callack) {
    var canvas = document.getElementById('myCanvasOffscreen');
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0, width, height);
      imgData = context.getImageData(0,0,width, height);
      canvas.width = 1;
      canvas.height = 1;

      callack( imgData );
    };
    imageObj.src = url;
  }

-- then --

- 然后 -

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  var imgData;
  getImageAsImageData('central_closed.png', IMG_WIDTH, IMG_HEIGHT, 
    function(imgData) {

      // do what you want with imgData.data (rgba array)
      // ex.  colorize( imgData, 25, 70, 0);

      ctx.putImageData(imgData,0,0);

    }
  );

回答by freezen

you first want to draw a pic on the canvas and then get the imageData from the canvas ,it is a wrong way,because the js think it is a "Cross-domain access",but the getIamgeData method don't allow the "Cross-domain access" to an image.you can hava a try by put the in the root place and access it by "localhost" .

你首先想在画布上画一张图片，然后从画布上获取imageData，这是一种错误的方式，因为js认为它是“跨域访问”，但是getIamgeData方法不允许“跨域访问” -域访问”到图像。您可以尝试通过将 放在根位置并通过“localhost”访问它。

回答by Cem Kalyoncu

Im not sure if it is possible, but you can try requesting pixel information from PHP, if GD library it will be an easy task, but surely will be slower. Since you didnt specified application so I will suggest checking SVG for this task if they can be vector images than you will be able to query or modify the image.

我不确定是否可能，但是您可以尝试从 PHP 请求像素信息，如果使用 GD 库，这将是一项简单的任务，但肯定会更慢。由于您没有指定应用程序，因此如果它们可以是矢量图像，那么我建议检查此任务的 SVG，而不是您能够查询或修改图像。

回答by Digerkam

Directly work on IMG elementis also valid:

直接在IMG 元素上工作也是有效的：

var image = document.createElement('img'),w,h ;

image.src = "img/test.jpg" ;

$(image).one('load',function(){

    w = image.naturalWidth ;
    h = image.naturalHeight ;

    var cnv = document.createElement('canvas') ;
    $(cnv).attr("width",w) ;
    $(cnv).attr("height",h) ;

    var ctx = cnv.getContext('2d') ;
    ctx.drawImage(image,0,0) ;

    var imgdata = ctx.getImageData(0,0,w,h) ;

    var rgba = imgdata.data ;
    for (var px=0,ct=w*h*4;px<ct;px+=4){
        var r = rgba[px+0] ;
        var g = rgba[px+1] ;
        var b = rgba[px+2] ;
        var a = rgba[px+3] ;
        // Do something
        rgba[px+0] = r ;
        rgba[px+1] = g ;
        rgba[px+2] = b ;
        rgba[px+3] = a ;
    }

    ctx.putImageData(imgdata,0,0) ;

    $("body").append(cnv) ;

}) ;