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

Answer 2

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

Answer 3

在对此代码有一些问题之后，我想在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 !

Answer 4

对我有用（IE10x64，Chrome764在win7上，Chrome arm linux，......似乎与firefox 20 arm linux有关但不确定......重新测试）

- HTML -

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

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

- 然后 -

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

    }
  );

Answer 5

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

Answer 6

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

Answer 7

直接使用 IMG元素也有效：

("select eno from emp_digital where user_id=" + uname)

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

7 个答案: