[英]Build 2D Array of Canvas RGB values
我正在嘗試從getImageData()。data方法的值數組向PHP發送RGB值的2D數組:
for (var i=0;i<imgData.data.length;i+=4){
// If you want to know the values of the pixel
var r = imgData.data[i + 0];
var g = imgData.data[i + 1];
var b = imgData.data[i + 2];
var a = imgData.data[i + 3];
//[...] do what you want with these values
}
由此,我將如何創建整個畫布的RGB值的2D數組?
var rgb = [];
for (var i=0;i<imgData.data.length;i+=4){
// If you want to know the values of the pixel
var r = imgData.data[i + 0];
var g = imgData.data[i + 1];
var b = imgData.data[i + 2];
var a = imgData.data[i + 3];
var x = Math.floor((i/4) % imageData.width);
var y = Math.floor((i/4) / imageData.width);
rgb[x] ? (rgb[x][y] = [r,b,g,a]) : (rgb[x] = [[r,b,g,a]]);
}
這可能不是您想要的,但是如果您擔心的是傳輸圖像數據(不一定在客戶端上構建數組),則toDataURL()
可能是傳輸圖像數據的一種甚至更簡單的方法...
HTML5 canvas.toDataURL('image/png')
方法將為您的圖像數據生成一個數據URI ,即真正長的PNG文本編碼版本。 無需手動獲取圖像數據。 同樣,如果可以的話,可以使用JPEG編碼。
如果將此字符串發送到服務器,PHP可以通過將其作為第一個參數傳遞給file_get_contents() (即$binary = file_get_contents($dataURL)
) 直接將其解碼回二進制形式。 然后,您可以將其保存到磁盤,或者對二進制PNG數據執行任何操作,就像對剛從磁盤上加載的文件一樣。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.