2

getImageData（）。dataメソッドの値の配列からRGB値の2D配列を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値の2D配列をどのように作成しますか？

4

2 に答える 2

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]]);
}
于 2012-09-06T02:13:19.393 に答える
0

これはあなたが望むものではないかもしれませんが、あなたの懸念が画像データを転送することである場合（必ずしもクライアント側で配列を構築する必要はありません）、toDataURL()画像データを転送するさらに簡単な方法かもしれません...

HTML5canvas.toDataURL('image/png')メソッドは、画像データのデータURIを生成します。つまり、非常に長いテキストエンコードバージョンのPNGです。画像データを手動で取得する必要はありません。同様に、必要に応じてJPEGエンコーディングを使用することもできます。

この文字列をサーバーに送信すると、PHPは、この文字列をfile_get_contents（）（つまり）の最初の引数として渡すことにより、直接バイナリ形式にデコードして戻すことができます。次に、これをディスクに保存するか、ディスクからロードしたばかりのファイルの場合と同じように、バイナリPNGデータを使用して必要な操作を行うことができます。$binary = file_get_contents($dataURL)

于 2012-09-06T13:39:07.653 に答える