构建 Canvas RGB 值的二维数组答案

【问题标题】：Build 2D Array of Canvas RGB values构建 Canvas RGB 值的二维数组
【发布时间】：2012-08-30 19:06:07
【问题描述】：

我正在尝试从 getImageData().data 方法的值数组中向 PHP 发送一个 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];

    //[...] do what you want with these values
}

由此，我将如何创建整个画布的 RGB 值的二维数组？

【问题讨论】：

标签： php javascript canvas multidimensional-array rgb

【解决方案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]]);
}

【讨论】：

快速问题：因为我认为我不需要 Alpha 值来做我正在做的事情，我应该只删除“a”吗？ :)
嗯，由于某种原因，并不是所有的像素都被抓取了。第二个数组中的一些对象是空的，正如我在通过JSON.stringify() 运行它时发现的那样。 :O
现在怎么样，我通过一个 10x10 的图像运行它并生成正确的 (x,y)
完美！再次感谢队友。 :-D 有一个美好的夜晚（或一天，取决于您的时区）。 x)

【解决方案2】：

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

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

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

【讨论】：

我知道 toDataURL()。不幸的是 - 也许我应该在问题中提到这一点 - 浏览器不支持该功能。 :-( 但是谢谢。:)