Javascript изображение манипуляции?Пиксель за пикселем

Question

Есть ли способ или библиотека для получения изображения цвета изображения пиксель за пикселем в JavaScript?Мне нужно прочитать много форм OMR, и я хочу сделать это на клиентах, а не на моем сервере: D.Так что я могу создать систему с помощью javascript, если смогу получить необработанные данные, или мне нужно создать настольное приложение, которое мне совсем не нравится.Спасибо

Answer 1

Я нашел эту библиотеку, которая кажется интересной: 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 function

YouЗдесь также можно найти интересную информацию: Что такое утечка памяти при использовании getImageData, javascript, HTML5 canvas

Answer 2

Конечно, нет необходимости использовать библиотеки. Это действительно просто через холсты .

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

Что вам нужно, это:

1. создать <canvas>
2. получить холст context
3. копия img на canvas
4. получить холст image data (массив значений [r,g,b,a,r,g,b,a,r,g,..])
5. do `The magic`®
   
6. положить image data назад
7. положить изменено canvas обратно на <img>

код для работы с холстом

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, изменить изображение ...

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

Интересно, где холст?

document.body.appendChild(cvs);

некоторые магические функции

Поскольку image data - это массив последовательных значений r,g,b,a,r,g,.., а один пиксель состоит из 4 значений, вам необходимо пересчитать индексы. Формула проста: data[(y*width + 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);
}

---

обновление 2019 Uint8ClampedArray

Вы можете манипулировать данными пикселей непосредственно с помощью этого подмассива "view" . subarray отличается от slice или от предыдущего примера тем, что он не создает поверхностную копию массива, а массив, который использует то же хранилище.

Подробнее на MDN: Uint8ClampedArray .

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

Answer 3

HTML5 Элемент Canvas - это путь, если у вас нет ограничений браузера.