Javascript图像处理？逐像素

有没有一种方法或库可以在javascript中逐像素获取图像颜色数据？ 我需要阅读大量的OMR表单，我想在客户端而不是在我的服务器上执行：D。因此，如果我可以访问原始数据，我可以使用javascript构建系统，或者我必须构建一个我根本不喜欢的桌面应用程序。

---

谢谢，如果没有浏览器限制，HTML5画布元素就是最好的选择。

我发现了这个库，它看起来很有趣：

它可以使你的图片，所以我想如果你检查一下代码。。 但它似乎对IE不起作用

我想这部分对你来说很有趣：

var ctx = params.canvas.getContext("2d");
var rect = params.options.rect;
var dataDesc = ctx.getImageData(rect.left, rect.top, rect.width, rect.height);
var data = dataDesc.data;
if (!getCopy) params.canvasData = dataDesc;
  return data;

从pixtastic.core.js

prepareData

函数

---

您也可以在这里找到有趣的信息：

当然，不需要使用库。通过画布这真的很简单

img->canvas->magic->canvas->img

您需要的是：

创建

获取画布

context

将

img

复制到

canvas

获取画布

图像数据

（值数组

[r，g，b，a，r，g，b，a，r，g，…]

）

施展魔法`

将

图像数据

放回

将更改的

画布

放回

处理画布的代码 6,7，修改图像。。。 想知道画布在哪里？ 一些神奇的功能 由于

图像数据

是连续的

r、g、b、a、r、g、…

值的数组，并且一个像素由4个值组成，因此需要重新计算索引。公式很简单：

data[（y*width+x）*4+ch]

，其中

ch

对于

r、g、b、a

通道介于

0

和

3

之间

请注意，下面有更简洁、更快的解决方案

---

更新2019

uint8clampedaray

您可以使用此“视图”直接操作像素数据。

子阵列

与

切片

或上一示例不同，它不创建数组的浅层副本，而是创建共享同一存储的数组

阅读更多信息

或

---

可能是几个月前我在silverlight中做的复制品，我不相信任何事情都是不可能的，只要我能让用户选择我想要阅读的图像。甚至逐字节读取数据也是一个解决方案（我在silverlight中这样做）。所以我只需要使用什么来减少开发时间：D@denisk，可能是重复的，但我也需要任何可能帮助我实现目标的想法。我昨天查看了它的代码，它基本上是在画布上进行操纵的，所以如果没有其他方法，我会选择它，所以我认为画布是一条路要走，只要我不支持ie9:D谢谢你，但我不能选择你的答案，因为MeLight很早就回答了所以我认为画布是一条路，只要我不支持ie9:D，祝你好运。有时我希望我可以开发一个基于web的应用程序，不需要支持任何ie:）应该是公认的答案！感谢您提供这样一份文档

var cvs = document.createElement('canvas'),
    img = document.getElementsByTagName("img")[0];   // your image goes here
    // img = $('#yourImage')[0];                     // can use jquery for selection
cvs.width = img.width; cvs.height = img.height;
var ctx = cvs.getContext("2d");
ctx.drawImage(img,0,0,cvs.width,cvs.height);
var idt = ctx.getImageData(0,0,cvs.width,cvs.height);

// usage
getPixel(idt, 852);  // returns array [red, green, blue, alpha]
getPixelXY(idt, 1,1); // same pixel using x,y

setPixelXY(idt, 1,1, 0,0,0,255); // a black pixel

ctx.putImageData(idt, 0,0);  // 0,0 is xy coordinates
img.src = cvs.toDataURL();

document.body.appendChild(cvs);

function getPixel(imgData, index) {
  var i = index*4, d = imgData.data;
  return [d[i],d[i+1],d[i+2],d[i+3]] // [R,G,B,A]
}

function getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x);
}

function setPixel(imgData, index, r, g, b, a) {
  var i = index*4, d = imgData.data;
  d[i]   = r;
  d[i+1] = g;
  d[i+2] = b;
  d[i+3] = a;
}

function setPixelXY(imgData, x, y, r, g, b, a) {
  return setPixel(imgData, y*imgData.width+x, r, g, b, a);
}

function getPixel(imgData, index) {
  return imgData.data.subarray(index*4, index*4+4) // Uint8ClampedArray(4) [R,G,B,A]
}

let px = getPixelXY(idt, 0, 0)
px[0] = 255

// ctx.putImageData(idt,0,0); // makes the pixel reddish

function getPixel(imgData, index) {
  return imgData.data.slice(index*4, index*4+4) // [R,G,B,A]
}

function setPixel(imgData, index, pixelData /*[R,G,B,A]*/) {
  imgData.data.set(pixelData, index*4)
}