Javascript图像处理？逐像素

Is there a way or a library to obtain an images color data pixel by pixel in javascript? I need to read lots of OMR form, and i want to do it on clients not on my server :D. So either i can build it the system with javascript if i can reach raw data or i have to build a desktop application which i don't like at all. Thanks

有没有办法或图书馆在javascript中逐像素地获取图像颜色数据?我需要阅读很多OMR表单,我想在不在我的服务器上的客户端上执行此操作:D。所以要么我可以使用javascript构建系统,如果我可以达到原始数据,或者我必须构建一个我根本不喜欢的桌面应用程序。谢谢

3 个解决方案

#1

HTML5 Canvas element is the way to go if you don't have browser limitations.

如果您没有浏览器限制,HTML5 Canvas元素就是您的选择。

#2

I found this library which seems interesting : http://www.pixastic.com/

我发现这个图书馆看起来很有趣:http://www.pixastic.com/

It can make a color histogram of your picture so I guess If you inspect the code a bit .. But It doesn't seems to work with IE ..

它可以制作你的图片的颜色直方图,所以我想如果你检查一下代码..但它似乎不适用于IE ..

I guess this part is interesting for you :

我想这部分对你很有意思:

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;

from pixtastic.core.js prepareData function

来自pixtastic.core.js的prepareData函数

You can also find interesting info here : What is leaking memory with this use of getImageData, javascript, HTML5 canvas

你也可以在这里找到有趣的信息:使用getImageData,javascript,HTML5 canvas来泄漏内存是什么

#3

Sure, no need to use libraries. It's really simple through canvases.

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

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

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

What you need is to:

你需要的是:

1. create <canvas>
2. get canvas context

得到画布上下文

3. copy img to canvas

将img复制到画布上

4. get canvas image data (an array of values [r,g,b,a,r,g,b,a,r,g,..])

获取画布图像数据(值数组[r,g,b,a,r,g,b,a,r,g,..])

5. do `The magic`®
    

做'魔术'

6. put image data back ?

放回图像数据?

7. put changed canvas back to <img> ??

将更改后的画布放回 ??

le code to deal with canvas

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

6,7, modify the image ...

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

some magic functions

Since the image data are an array of consecutive r,g,b,a,r,g,.. values, you need to recalculate indexes. The formula is simple: data[(y*w+x)*4+ch], where ch is between 0 and 3 for r,g,b,a.

由于图像数据是连续的r,g,b,a,r,g,..值的数组,因此需要重新计算索引。公式很简单:data [(y * w + x)* 4 + ch],其中ch在0到3之间,对于r,g,b,a。

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

so where's the canvas, dmmit!

document.body.appendChild(cvs);