4

ここで Fabric.js が問題になるとは思いません。時間アラートを追加すると 2 ～ 3 秒しかかからないからです。ただし、使用するコードは次のとおりです。

 applyTo: function(canvasEl) {
    var context = canvasEl.getContext('2d'),
        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
        data = imageData.data,
        len = imageData.width * imageData.height * 4,
        index = 0,
        average;

    while (index < len) {
      average = (data[index] + data[index + 1] + data[index + 2]) / 3;
      data[index]     = average;
      data[index + 1] = average;
      data[index + 2] = average;
      index += 4;
    }

    context.putImageData(imageData, 0, 0);
  },

したがって、それが犯罪者でない場合、犯罪者はputImageData機能です。

もちろん、15秒以内に5000x5000の画像で機能するように、その機能を増やしたり最適化したりする方法はありますか?

そうでない場合は、jQuery を介して putImageData が終了した後にのみ削除される「作業中」のアイコンを設定する方法はありますか?

4

2 に答える 2

1

が最も時間がかかっている場合putImageDataは、ブラウザが提供する低レベルの機能であるため、速度を向上させるためにできることはあまりありません。

できることは、画像を徐々に処理し、ブラウザーを 15 秒間ブロックすることなくユーザーに表示することです。

ヒント:時間アラートでスクリプトの実行を計る代わりに、Chrome 開発者ツールを使用することをお勧めします。彼らには、javascript、より具体的にはキャンバス描画用の優れたプロファイリング ツールがあります。

Google デベロッパー ツール フレーム チャート

于 2014-01-04T03:35:02.877 に答える