[英]Javascript image manipulation? Pixel by pixel
有沒有辦法或庫在 javascript 中逐像素獲取圖像顏色數據? 我需要閱讀大量 OMR 表格,並且我想在不在我的服務器上的客戶端上進行閱讀:D。 因此,如果我可以獲取原始數據,我可以使用 javascript 構建系統,或者我必須構建一個我根本不喜歡的桌面應用程序。 謝謝
當然,不需要使用庫。 通過畫布真的很簡單。
img -> canvas -> magic -> canvas -> img
你需要的是:
<canvas>
context
img
復制到canvas
image data
(一組值[r,g,b,a,r,g,b,a,r,g,..]
)image data
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
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]
,其中對於r,g,b,a
通道, ch
介於0
和3
之間。
請注意,下面有更簡潔和更快的解決方案。
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);
}
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)
}
如果您沒有瀏覽器限制,HTML5 Canvas 元素是通往 go 的方式。
我發現這個庫看起來很有趣: 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
您還可以在此處找到有趣的信息: 使用 getImageData、javascript、HTML5 ZFCC790C490A86195DFDCZ1 會泄漏 memory
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.