构建Canvas RGB值的2D数组

时间:2012-09-06 01:57:20

标签: php javascript canvas multidimensional-array rgb

我正在尝试从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值的2D数组?

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

这可能不是您想要的,但如果您关注的是传输图像数据(不一定在客户端构建阵列),toDataURL()可能是一种更简单的传输图像数据的方法。 。

HTML5 canvas.toDataURL('image/png')方法会为您的图像数据生成data URI - 即PNG的真正长文本编码版本。无需手动获取图像数据。同样,如果可以的话,你可以使用JPEG编码。

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