Chuyển đổi hình ảnh sang một mảng RGB trong Javascript

Question

Có thể lấy một mảng pixel từ hình ảnh PNG hoặc BMP trong Javascript không? Tôi muốn lấy một mảng RGB từ một hình ảnh để tôi có thể thao tác mảng các điểm ảnh, và sau đó vẽ hình ảnh đã sửa đổi trên một khung hình.

UPDATE: Tôi tìm thấy một bản sao chính xác ở đây: how to get the RGB value of an image in a page using javascript?

Tuy nhiên, câu trả lời không đi vào nhiều chi tiết về làm thế nào để thực sự giải quyết vấn đề này.

Answer 1

Có một trăm hướng dẫn trên mạng về việc sử dụng HTML Canvas imageData, nhận giá trị RGBA của canvas. Thực hiện tìm kiếm canvas imageData và bạn sẽ tìm thấy nhiều thông tin.

Tất cả bạn phải làm là:

ctx.drawImage(img, 0, 0); 
var imgData = ctx.getImageData(x, y, width, height).data; 

imgData tại là một mảng mà mỗi 4 nơi là mỗi điểm ảnh. Vì vậy, [0][1][2][3] là [r][g][b][a] của pixel đầu tiên.