是否可以将画布等html图像与getImageData/putImageData一起使用？

我想知道是否有一种方法可以动态修改/访问html图像中包含的数据，就像它们是html5画布元素一样。使用canvas，您可以在javascript中使用getImageData（）和putImageData（）访问原始像素数据，但到目前为止，我还没有弄清楚如何使用图像来访问原始像素数据。

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

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

/1）在页面上或仅在代码中创建画布
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//2）将图像数据复制到画布中
var myImgElement=document.getElementById（'foo'）；
ctx.drawImage（myImgElement，0,0）；
//3）读取图像数据
var w=myImgElement.width，h=myImgElement.height；
var imgdata=ctx.getImageData（0,0，w，h）；
var rgba=imgdata.data；
//4）根据需要阅读或操作rgba
对于（var px=0，ct=w*h*4；px您首先希望在画布上绘制一张图片，然后从画布上获取图像数据，这是一种错误的方法，因为js认为这是一种“跨域访问”，但getIamgeData方法不允许对图像进行“跨域访问”。您可以尝试将图片放在根位置，然后通过“本地主机”访问它.
在这段代码出现一些问题后，我想在Phrogz的回答中添加一到两件事：

// 1) Create a canvas, either on the page or simply in code
var myImgElement = document.getElementById('foo');
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
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 !

这对我来说很有效（IE10x64，win7上的Chromex64，ChromeARM linux，…似乎在firefox 20 arm linux上出现bug，但不确定…是否需要重新测试）

--html--

--然后--

直接在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) ;

}) ;

var image=document.createElement（'img'），w，h；
image.src=“img/test.jpg”；
$（图像）.one（'load'，function（）{
w=图像的自然宽度；
h=图像。自然高度；
var cnv=document.createElement（'canvas'）；
美元（cnv）.attr（“宽度”，w）；
美元（cnv）.attr（“高度”，h）；
var ctx=cnv.getContext（'2d'）；
ctx.drawImage（图像，0,0）；
var imgdata=ctx.getImageData（0,0，w，h）；
var rgba=imgdata.data；
对于（var px=0，ct=w*h*4；px这不允许我对图像数据本身进行操作，这正是我想要做的。一旦图像被复制到
canvas
元素中，您就可以以通常操作
canvas
像素数据的任何方式对其进行操作。我想完全在浏览器中进行操作，而不是使用任何服务器端的scripting完全可以。你能提供一些细节吗？这很难做到，但可能有其他解决方案。如果我真的在某个软件中实现这一点，我可能会更新图像的DOM节点。然而，我的问题更多的是针对“这可能吗？”要了解更多关于html本身的信息。您的代码不起作用，someOtherContext.drawImage（ctx，0,0）；不断抛出“Type error”，因为第一个属性必须是image，而不是context（chrome 7，firefox 3.6）如果要迭代图像中的所有像素，步骤4应该是…ct=w*h*4…因为每个像素有四个值。@dvh我想它应该是“画布”取而代之的是ctx。drawImage可以拍摄图像或画布。请注意，浏览器现在对从
画布
获取数据有一个跨源安全限制，在该画布上写入了来自域外的图像数据。例如，Chrome的消息说
未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。
  // 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;
  }

  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);

    }
  );

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) ;

}) ;