Lặp qua các điểm ảnh trong một hình ảnh

Question

Dự án của tôi là nhập hình ảnh vào thẻ canvas trong trang HTML và sau đó lặp qua các pixel và giá trị RGBA của pixel. Trong khi lặp qua các giá trị màu đỏ, vì vậy mọi giá trị thứ tư trong pixel, tôi muốn ghi lại vị trí của các pixel đại diện cho một pixel màu trắng. Bây giờ, tôi có hình ảnh tải xuống với một số mã tôi nhận được từ blog này, http://www.phpied.com/photo-canvas-tag-flip/.

Anh ấy có một bài đăng khác, trong đó anh ấy cung cấp một số mã về cách lặp qua các pixel và ghi lại thông tin tôi muốn ghi, nhưng tôi không hiểu và tôi không muốn sao chép mã của anh ấy mà không biết tôi đang làm gì Vì vậy, bất cứ ai có thể vui lòng giải thích phương pháp anh ấy đang sử dụng hoặc có thể chỉ cho tôi một cách khác để làm những gì anh ấy đang làm? Đây là liên kết đến bài đăng khác http://www.phpied.com/pixel-manipulation-in-canvas/.

Answer 1

Thật đơn giản.

Tất cả dữ liệu pixel cho canvas được lưu trữ tuần tự trong một mảng.

Dữ liệu của mảng đầu tiên chiếm phần tử mảng # 0-3 (đỏ = 0/xanh = 1/xanh = 2/alpha = 3).

Dữ liệu mảng thứ hai chiếm các phần tử mảng # 4-7 (đỏ = 4/xanh = 5/xanh = 6/alpha = 7).

Và vân vân ...

Bạn có thể tải dữ liệu điểm ảnh bằng cách sử dụng context.getImageData() và liệt kê thông qua mảng.

var imgData = context.getImageData(0,0,canvas.width,canvas.height); 
var data = imgData.data; 

// enumerate all pixels 
// each pixel's r,g,b,a datum are stored in separate sequential array elements 

for(var i=0; i<data.length; i+=4) { 
    var red = data[i]; 
    var green = data[i+1]; 
    var blue = data[i+2]; 
    var alpha = data[i+3]; 
} 

Bạn cũng có thể thay đổi các giá trị mảng đó và sau đó lưu mảng trở lại hình ảnh bằng cách sử dụng context.putImageData().

// save any altered pixel data back to the context 
// the image will reflect any changes you made 

context.putImageData(imgData, 0, 0); 

Sau đó, hình ảnh sẽ thay đổi theo những thay đổi bạn đã thực hiện đối với mảng pixel của nó.

Answer 2

Tôi khuyên bạn nên sử dụng khung xử lý hình ảnh để tập trung vào các thuật toán thay vì thao tác mảng các giá trị. Một số khung:

• fabric.js
• processing.js
• MarvinJ

Trong trường hợp của MarvinJ, bạn chỉ có thể lặp qua pixel lặp lại cột và hàng tọa độ. Tôi sử dụng các phương pháp getIntComponentX() để truy cập các thành phần màu.

for(var y=0; y<image.getHeight(); y++){ 
    for(var x=0; x<image.getWidth(); x++){ 
     var red = image.getIntComponent0(x,y); 
     var green = image.getIntComponent1(x,y); 
     var blue = image.getIntComponent2(x,y); 
    } 
} 

Vì vậy, bạn không cần phải lo lắng về cách dữ liệu pixel được thể hiện. Để kiểm tra xem một điểm ảnh là màu trắng:

// Is white? 
if(red >= 250 && blue >= 250 && green >= 250){ 
    console.log("Pixel at "+x+","+y+" is white"); 
} 

Runnable Ví dụ:

var canvas = document.getElementById("canvas"); 
 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); 
 

 
function imageLoaded(){ 
 
    
 
    var whitePixels=0; 
 
    for(var y=0; y<image.getHeight(); y++){ 
 
    for(var x=0; x<image.getWidth(); x++){ 
 
     var red = image.getIntComponent0(x,y); 
 
     var green = image.getIntComponent1(x,y); 
 
     var blue = image.getIntComponent2(x,y); 
 
     var alpha = image.getAlphaComponent(x,y); 
 
     
 
     // Is white? 
 
     if(red >= 250 && green >= 250 && blue >= 250 && alpha > 0){ 
 
     whitePixels++; 
 
     } 
 
    } 
 
    } 
 
    
 
    image.draw(canvas); 
 
    
 
    document.getElementById("result").innerHTML = "white pixels: "+whitePixels; 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas" width="500" height="344"></canvas> 
 
<div id="result"></div>