問題タブ [pixel-manipulation]

HTML 5 キャンバスのピクセル操作を使用して動的な視覚効果を実行しようとしていますが、CanvasPixelArray でのピクセルの設定が非常に遅いという問題に直面しています。

たとえば、次のようなコードがある場合:

Chrome でプロファイリングすると、CanvasPixelArray が使用されていない次のコードよりも 44% 遅く実行されることがわかります。

私の推測では、この速度低下の理由は、JavaScript の double と、CanvasPixelArray で使用される内部の符号なし 8 ビット整数との間の変換によるものです。

1. この推測は正しいですか？
2. CanvasPixelArray で値を設定するのにかかる時間を短縮する方法はありますか?

画像 (.png ファイル) 内のピクセルを整数配列に変換するにはどうすればよいでしょうか。各ピクセルは、対応する ARGB 整数に変換されます。ちなみに、2D 整数配列ではなく、1D 配列です (アクセスは array[row*width+col] を介して行われます)。

ありがとう。

色深度が8ビットのグレースケール画像のデータは、各ピクセルのバイトの最初の7ビットに保存され、最後のビットはそのまま保持されると聞きました。それで、すべてのピクセルの最後のビットを使用していくつかの情報を保存することができます、それは本当ですか？

もしそうなら、データはどのように個々のピクセルで解釈されるでしょうか？つまり、赤、青、緑はありません！では、これらのビットはどういう意味ですか？

また、画像のすべてのピクセルの平均値を計算するにはどうすればよいですか？私は、 JAIやその他のサードパーティではなく、純粋なJavaクラスを使用することを好みます。

アップデート1

getRGBメソッドは常に1バイトより大きいintを返します!!! 私は何をすべきか？

Bitmap.getPixels（）メソッドを使用してビットマップから派生したint配列があります。このメソッドは、ビットマップからのピクセルを配列に入力します。その配列をループするときに、各ピクセルのxy座標を取得するにはどうすればよいですか？事前にマットに感謝します。

[更新]数学をありがとう。私は次のコードを試しました。最初の50000ピクセルを白に変更したビットマップがあります。ビットマップを繰り返し処理して、すべての白いピクセルを赤に変更したいと思います。atmビットマップの上部にある白いピクセルのブロックを通る赤い線が1本だけあります。何かアイデアはありますか？どうもありがとう。

ビットマップ内の個々のピクセルのアルファ チャネルを暗くしようとしています。ピクセルの色をRGBのままにしたいのですが、ピクセルを半透明にするだけです。Color クラスを見て、Color.argb(int,int,int,int) メソッドを試しましたが、うまくいきません。ピクセルの元の RGB を保持しながら、ピクセルのアルファを設定するにはどうすればよいですか?

よろしくお願いします。

[編集] 笑スッポン:)。こんにちは、以下はビットマップを構成する方法です。それがあなたの言いたいことなら、私には根底にあるイメージはありません。私がやろうとしているのは、基本的に特定のピクセルを半分透明にすることです。ビットマップがあり、ビットマップに円を配置しました。円内のピクセルのみを対象とするアルゴリズムが用意されており、それらのピクセルをピンクに変更できます。私が望むのは、円の各ピクセルをチェックして、元のピクセルの色の半分を維持しながら、それが理にかなっていれば、半透明にすることです:)

[編集]

上記の各フィールドのシークバーを調整することで、画像の色相、彩度、明るさ、コントラスト、シャープネスを調整できるアプリを作成しようとしています。http://ronbigelow.com/articles/workflow_basic/hue-saturation_tool.jpgのように

これを行う方法がわかりません。オンラインでチュートリアルが見つかりません。Android には、これを行うものは既にありますか? 個々のピクセルの色を操作する必要がありますか? ピクセルをいじる必要がある場合、どうすればよいですか?

ピクセルデータを構築するカスタムコードを使用してアイソメ正方形を描画し、putImageData を使用してキャンバスに配置しようとしています。

しかし、期待した結果が得られません.キャンバスの生のピクセルデータをざっと見てみると、私が構築したすべてのピクセルデータが混乱しているようです.

以下のコードから欲しいのは、黒い背景に赤いひし形です。どこが間違っているのですか？

JSFiddle の例はこちら

私はこのコードを持っています:

NPEをスローするか、配列が使用されている場合、またはgetRGBを渡す前に配列を割り当てるとArrayOutOfBoundsExceptionがスローされます。デバッガーでチェックインすると、イメージにはサイズがあり、割り当てられています。

更新: getRGB

HTML 5 の機能のいくつかを使用して小さな Tetris クローンを作成していますが、ちょっとしたジレンマに陥っています。

私のテトロミノはブロックで構成されていません。回転に依存するシェーディングとシャドウがあり、それぞれが独自のイメージです。つまり、ゲームの状態が変化するたびに通常の「すべてを再描画」することはできません。これは、すべてのピースのドロップ履歴を追跡し、ラインをクリアしたいときにいつでも「リプレイ」することを意味するためです。

だから私のオプションは次のとおりです。

1) 互いに積み重ねられた 2 つのキャンバス要素を作成します。裏面は「ボード」のイメージです。上の 1 つはピース キャンバスで、簡単にスライスして並べ替えることができます。ただし、すべてを 1 つのキャンバス要素に保持したかったので、これは非常にハックな感じがします。

2) 「描画」コンテキストと「バッファ」コンテキストを作成します。バッファ コンテキストでは、すべてのピースがあり、自由に操作できます。バッファを画面に描画するときは、getImageData を取得し、すべてのピクセルをループして、ボード イメージに合成します。次に、これを putImageData を使用して「描画」コンテキストに書き込みます。この問題は、ImageData 構造を取得して canvas 要素に合成する方法が見つからないために発生します (drawImage を使用して ImageElements でそれを行うことができますが、drawImage は ImageData 構造を取得しません)。

どちらのソリューションも私には非常にエレガントに思えません。

ありがとう

私は次のようにピクセル操作を使用する必要があるアプリケーションに取り組んでいます：点（x、y）の周り半径Rの円内のピクセルを凝縮または拡張する必要がありますが、 UIImage。私は次の方法で生データを取得します（私はこれをウェブ上で見つけました）：

だから、私はrawDataにピクセルデータを持っています。

さて、現在のピクセルが原点（x、y）の円内にあり、半径Rの円内にあるかどうかをどのように知ることができますか？そして、これらのピクセルをどのように凝縮/拡張しますか？

ありがとう