3

現在、JavaScript で画像編集プログラムを作成しています。JS についてもっと学びたいと思ったので、JS を選びました。私が扱っている平均的な画像は、約 3000 x 4000 ピクセルの大きさです。(ピクセルを編集するために) imageData に変換すると、48000000 の値を処理する必要があります。そのため、Web ワーカーを導入して、配列の n 番目の部分のみを編集できるようにすることにしました。10 人の Webworker がいると仮定すると、各 Worker は 4800000 の値を処理する必要があります。webworkers を使用できるようにするために、選択したスレッドの量で大きな配列を分割しています。私が使用するコードは次のようになります。

while(pixelArray.length > 0){
    cD.pixelsSliced.push(pixelArray.splice(0, chunks)); //Chop off a chunk from the picture array
}

後でワーカーが配列で何かを行った後、別の配列に保存します。各ワーカーには ID があり、前述の配列の ID の場所に自分のパートを保存します (配列が正しい順序に保たれるようにするため)。$.map を使用してその配列 ([[1231][123213123][213123123]] のように 1 つの大きな配列 [231231231413431] に連結し、そこから後で必要な imageData を作成します。次のようになります。

cD.newPixels = jQuery.map(pixelsnew, function(n){
    return n;
});

この配列 (cD.pixelsSliced) が作成された後、imageData を作成し、このイメージを imageData-Object に次のようにコピーします。

cD.imageData = cD.context.createImageData(cD.width, cD.height);
for(var i = 0; i < cD.imageData.data.length; i +=4){ //Build imageData
    cD.imageData.data[i + eD.offset["r"]] = cD.newPixels[i + eD.offset["r"]];
    cD.imageData.data[i + eD.offset["g"]] = cD.newPixels[i + eD.offset["g"]];
    cD.imageData.data[i + eD.offset["b"]] = cD.newPixels[i + eD.offset["b"]];
    cD.imageData.data[i + eD.offset["a"]] = cD.newPixels[i + eD.offset["a"]];
}

今、私はここで膨大な量のデータを扱っており、画像編集にはブラウザを使用するべきではなく、別の言語を使用するべきであることに気付きました (私はユニで Java を使用しています)。しかし、初めて大きな画像を試したときは率直に言ってかなり驚いたので、パフォーマンスに関するヒントがあれば教えてください。画像をロードするのに「それ」ほど時間がかかるとは思いもしませんでした（コードの最初の平和）。Firefox は実際に私のスクリプトが壊れていると考えています。コードの他の 2 つの部分は、スクリプトの速度を低下させることがわかった部分です (これは正常です)。ええ、私はどんなヒントにも感謝します。

ありがとうございました

4

1 に答える 1

2

Web Worker を使用する場合は、Structured Cloning ではなく、Transferable Objects を検討することをお勧めします。Web ワーカーは通常、構造化クローンを使用してオブジェクトを渡します。つまり、コピーが作成されます。大きな画像などの大きなオブジェクトの場合、これにはかなりの時間がかかる場合があります。

Transferable Objects を使用すると、データはあるコンテキストから別のコンテキストに転送されます。つまり、ワーカーへのデータ送信のパフォーマンスを向上させるゼロコピーです。

詳細については、 http ://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects を確認してください。

また、おそらく別のアイデアは、大きな配列を分割して突き合わせるタスクを Web ワーカーに移すことです。ここでブレインストーミングを行いますが、おそらく最初に Web ワーカーを生成することができます。これをマザー ワーカーと呼びましょう。このワーカーは、配列を分割して、負荷の高いタスクを実行し、母親に送り返す 10 の他の子ワーカーを生成できます。

母親は最終的にすべてを元に戻し、メイン アプリケーションに送り返します。

于 2013-08-21T11:11:44.680 に答える