1

ユーザーが保持したい領域の周りにマウスで線を引く単純な画像トリミングに取り組んでいます。彼らが確認すると、画像の残りの部分が切り取られます。現在、クロッピングを処理している方法は次のとおりです。

var data = c.getImageData(0,0,canvas.width,canvas.height);      
for (var x = 0; x < data.width; x++) {
   for (var y = 0; y < data.height; y++) {
      if (!c.isPointInPath(x,y)) {
         var n = x + (data.width * y);
         var index = n*4; 
         data.data[index+3] = 0;
      }
   }
}

ただし、これはすぐに行き詰まる可能性があります。保持しようとする画像が少ないほど、処理は速くなりますが、画像の 30% (キャンバスは 800x800) を保存しても、数秒間ハングアップします。これについてもっと速い方法はありますか？

4

3 に答える 3

2

トリミング画像機能を操作するためにピクセルの詳細に飛び込む理由がよくわかりません。画像の残りの部分をトリミングするのにより多くの時間が必要なため、画像が大きくなることは理解できます。実際には、ピクセルの 2 次元配列を反復処理すると、操作に必要な処理時間が、サイズの増加に伴って指数関数的に増加するためです。ピクセルマップ。

したがって、私の提案は、getImageDataandputImageData関数に触れることさえせずに、関数を作り直すことです。無駄だ。私なら以下の方法で作ります。

  1. でピクセル座標を取得しmouse downます。
  2. のイベント リスナーを作成しますmouse move。
  3. 元の画像の上に半透明の画像を作成し、fillRect関数を使用して作成したキャンバスに描画します。
  4. のイベント リスナーを作成しますmouse up。
  5. でピクセル座標を取得しmouse upます。
  6. 結果の正方形の座標を計算します。
  7. 正方形の座標をパラメーターとして使用して、結果のイメージをキャンバスに描画します。
  8. 最後のステップとして、キャンバスの内容を画像に描画します。

このようにして、画像のトリミング処理のオーバーヘッドを大幅に節約できます。

参照用のスクリプトは次のとおりです: https://github.com/codepo8/canvascropper/blob/master/canvascrop.js

于 2012-12-21T10:48:05.403 に答える
0

いくつかのアイデア：

getImageDataユーザーが描画するポリゴンのバウンディングボックスに制限します。

ループdata.height内data.widthで使用するなどを変数に入れます。

たぶん、あなたはテストの内側/外側を分割してimagedataアルファ値を設定することができます。

たぶん、ポリゴンを白黒のimagedataオブジェクトに描画してから、2つの違いを取得しますか？

機能を共有できますisPointInPath(x,y)か？

于 2013-01-29T21:20:51.080 に答える
0

ユーザー定義の形状を使用しなければならない場合、実際に高速化する方法はありませんが、行き詰まりはワーカーで処理できます。

于 2013-01-06T08:37:21.857 に答える