Geek asks and answers

Image processing in javascript? Pixel pixel

Is there a way or library to get a pixel of image color data by pixels in javascript? I need to read a lot of OMR forms, and I want to do this on clients, not on my server: D. That way, either I can create it using javascript if I can achieve raw data, or I need to create a desktop application that I I don’t like it at all. Thanks

+3
source share
3 answers

HTML5 The Canvas element is the way to go if you have no browser restrictions.

+3
source

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

, , . , , 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

: getImageData, javascript, HTML5 canvas

+3

, . .

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

:

  • <canvas>
  • context
  • img canvas
  • get canvas image data ( [r,g,b,a,r,g,b,a,r,g,..])
  • `The magic`®
  • image data ?
  • canvas <img>

code for working 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, change the image ...

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

some magic functions

Since image datathis is an array of sequential values r,g,b,a,r,g,.., you need to recalculate the indices. The formula is simple: data[(y*w+x)*4+ch]where chis between 0and 3for 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 is canvas dmmit!

document.body.appendChild(cvs);
+2
source

More articles:


All Articles