Nhận X và Y Pixel phối khi iterating trên HTML5 Canvas getImageData

Question

Tôi lặp lại trên một số dữ liệu hình ảnh lấy từ một canvas như vậy:

var imageData = this.context.getImageData(0, 0, this.el.width, this.el.height); 
var data = imageData.data; 

for (var i = data.length; i >= 0; i -= 4) { 
    if (data[i + 3] > 0) { 
     data[i] = this.colour.R; 
     data[i + 1] = this.colour.G; 
     data[i + 2] = this.colour.B; 
    } 
} 

Làm thế nào để tính toán X hiện tại và Y Pixel phối rằng tôi tại?

Answer 1

Trình tự số học đơn giản:

Chia vị trí tuyến tính theo chiều rộng. Đó là tọa độ Y của bạn. Nhân giá trị Y đó theo chiều rộng và trừ giá trị đó khỏi vị trí tuyến tính. Kết quả là tọa độ X.

Cũng lưu ý, bạn sẽ phải chia vị trí tuyến tính cho 4 vì đó là RGBA.

Answer 2

này nên làm việc

var x = (Math.floor(i/4) % 4); 
var y = Math.floor(Math.floor(i/this.el.width)/4); 

Answer 3

Corrected và thử nghiệm phiên bản mã:

var x = (i/4) % this.el.width; 
var y = Math.floor((i/4)/this.el.width);