image - 可以将 html 图像(如 Canvas )与 getImageData/putImageData 一起使用吗？

Question

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

Answer 1

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

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