构建画布RGB值的2D阵列 - Build 2D Array of Canvas RGB values

Build 2D Array of Canvas RGB values

本文关键字：2D 阵列值的 RGB 构建 | 更新日期: 2023-09-27

我正试图从getImageData（）的值数组中向PHP发送一个RGB值的2D数组。data方法：

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()可能是传输您的图像数据的更简单的方法。。。

HTML5canvas.toDataURL('image/png')方法将为您的图像数据生成一个数据URI，即PNG的一个非常长的文本编码版本。无需手动获取图像数据。同样，如果需要的话，可以使用JPEG编码。

如果将此字符串发送到服务器，PHP可以通过将其作为第一个参数传递给file_get_contents（）（即$binary = file_get_contents($dataURL)），直接解码回二进制形式。然后，您可以将其保存到磁盘上，也可以像处理刚从磁盘上加载的文件一样，对二进制PNG数据执行任何操作。