建立画布RGB值的二维数组(Build 2D Array of Canvas RGB values)

我想要发送RGB值的2D阵列从值从getImageData（）数据的方法，该阵列到PHP：

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值的二维数组？

Answer 1:

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]]);
}

Answer 2:

这可能不是你想要的，但如果你关注的是传送图像数据（不一定是建立在客户端的数组）， toDataURL()可能是一个传输图像数据更简单的方法...

HTML5的canvas.toDataURL('image/png')方法将产生一个数据URI的图像数据-即巴布亚新几内亚的一个很长的，文本编码版本。 无需手动抓取的图像数据。 同样的，你可以，如果这是最好使用JPEG编码。

如果您发送此字符串到服务器，PHP可以直接把它当作第一个参数解码回二进制形式的file_get_contents（） （即$binary = file_get_contents($dataURL) 然后，您可以将此保存到磁盘或做任何你想用二进制PNG数据，你会用一个文件，你刚装过盘。

文章来源: Build 2D Array of Canvas RGB values