問題タブ [putimagedata]

ファイル入力要素を使用して、Android ブラウザーから画像をキャプチャしています。ここで、blob データを ImageData に変換して、 を使用してキャンバスにレンダリングできるようにしますputImageData。

上記のコードで、blobData を ImageData に変換するにはどうすればよいですか? 前もって感謝します。

はい、私は .getImageData() について知っています

つまり、いくつかのピクセルを変更する必要があるとしましょう:

どうやら、このメソッドは、「本物の」(私の奥深くに隠されている) 画像データの完全に新しいコピーを提供してくれるようです。新しいものを作成する場合：

2 つのバッファを比較します。

したがって、ビットマップから新しいコピーを作成するたびに。なんてこった、なぜ？さて、さらに進んでください：

上記は特にありません。しかし今、これを元に戻す時が来ました:

そして、これ自体が新しいループを実行し、私のimageDataをコピーします。

余分な仕事がたくさん！実際の imageData を取得して get/put せずに操作する方法はありますか? いいえの場合 - もう一度お尋ねします - なぜですか? セキュリティ上の理由ですか？彼らは私がそのピクセルで何ができると恐れていますか?

ありがとうございました！

オフスクリーンを使用してcanvas、特定の変数のランタイム値に基づいて特定の画像を動的に生成します。画像がオフスクリーン キャンバスに描画されたら、それを取得して、Web アプリケーションのいくつかの場所で使用したいと考えています。

戦略 1:オフスクリーン キャンバスのtoDataURL()メソッドを使用data:して、画像を含む URIを取得し、imgそれを表示するページ内の複数の要素にプログラムで設定できます。

戦略 2:オフスクリーン キャンバスのgetImageData()メソッドを使用してImageDataインスタンスを取得します。img要素を要素に置き換えて、それらcanvasを呼び出しputImageData()ます。

メモリに関してより効率的な戦略はどれですか? どちらがより「慣用的」ですか? 表示された画像のインスタンスを保持するために必要なメモリが重複しないようにしています。他の提案？

同じページに異なる ID を持つ 2 つのキャンバスがあります。私は最初のキャンバスを使用してイメージを描き、2 番目のキャンバスはすべての絵を見ることができるアルバムのようなものvar Img = painter.getImageData(0, 0, 100, 100)ですalbum.putImageData(Img, 0, 0). 助けてください！

コード : (これは手書きの書き込みなので、いくつかのエラーがある可能性があります。元のコードは長すぎます)

HTML :

JS:

これが私のコードです:

• このスニペットを実行してキーボードの矢印の 1 つをクリックすると、四角形が反対方向に移動することがわかります。これは、画面がゲームのカメラのようにしたかったからです。それはわざとやっている
  

• しかし、矢印の反対側 (上 = 下、左 = 右など) をクリックした後、逆方向に移動するには 2 回クリックする必要があることがわかります。これを他の矢でも試してみてください。
  

• 同じ矢印を何度も押すと、移動するギャップがどんどん大きくなりますが、論理的には同じでなければなりません。

2回のクリックではなく、直接応答し、ギャップが常に同じであることを望みます。なぜこれが起こっているのか、あなたの答えで説明してください。事前にありがとう！

ここで説明されているメソッドを stackoverflowにコピーしようとしています。しかし、解決方法がわからない問題がいくつかあります。

すべてを示すためにjsfiddleをセットアップしました。これは、パーティクルのみが移動して描画される2 番目の jsfiddleです。

私の問題は描画にあります。プロファイラーは、約 10000 個のパーティクルで drawImage が全体のループ時間の 40% を占めることを示しました。直接描画せずに計算のみを行うと、コードの実行を妨げるものは何もないため、問題は描画にあります。

これらの副作用なしでこの手法を使用する方法はありますか? 現在、円弧で円領域を作成する方法を紹介していますが、他のオブジェクトにも png ファイルを使用しており、まったく同じ動作を示します。

(問題: 透明な領域の代わりに黒い領域が重なっています。下の円の端が上の円を通して見えます)

私は自分自身をできるだけ明確に表現したいと思います（上の写真は私の問題を非常に明確に示しています）。あなたの助けに感謝したいと思います.

描画機能 - 表示されているキャンバスへの最終的な描画。

そして、これが私が他の目に見えないキャンバスにピンクがかった円形の領域を準備する方法です.

drawImage を使用するキャンバスと、非表示 (バッファ) キャンバスからピクセルをコピーするキャンバスの 2 つの可視キャンバスがあります。すべてが同じであることを除いて、オブジェクトを整数以外の値で移動すると、オブジェクトが途切れ始めます。ピクセルをコピーするときのフローリングが問題だと思いますが、drawImage と同じ結果を得るにはどうすればよいですか?

私はjsfiddleをセットアップしました。

(右側のオブジェクトがスタッターします)

ピクセルをコピーする関数。

14行目（jsfiddle行102）が疑わしい：

~~ の代わりに Math.round または Math.ceil を使用して目的の結果を得ることができますが、どちらが良いのか、または drawImage がこれをどのように処理するのかわかりません。

@Loktar によるオリジナル コード - スタックオーバーフロー。

私には特定のケースがありますが、一般的にも興味があります。

キャンバスがあり、createImageData を使用して ImgData を取得し、データ プロパティを別のものに設定して、PutImageData を使用し、この変更された ImgData を渡します。

コンソールで Javascript でロジックを記述しても問題なく動作しますが、私の PureScript バージョンは失敗します。エラーは次のとおりです。

PureScript では:

この JavaScript をコンソールに書き込むと動作します (arr は 160*144*4 ゼロです)

getCleanBuffer をデバッグしましたが、これが私が見つけたものです

この $9 (変更されたデータを含む ImgData のコピー) 変数を調べると、v (元の ImgData) のように ImgData 型ではないことがわかりますが、それは単なる「オブジェクト」です。v の幅と高さがありませんが、デバッグ中に修正しても同じエラーが発生します。

問題は、新しいオブジェクトが型のないレコードであることだと思います。幅と高さがコピーされていないという事実は、別の問題です。

データ属性を手動で設定する JavaScript 関数を記述できます。しかし、このケースは一般的によくあるケースのように思えますが、確かに何かが欠けているのではないでしょうか?

ありがとう！

XMLHttpRequest を使用して png ファイルをロードし、応答を使用してキャンバス オブジェクトに画像データを設定することで、Image オブジェクトの必要性を完全に排除し、ImageData に直接アクセスしたいと考えています。これまでのところ、私のコードは次のようになります。

ここで何が間違っていますか？Uint8ClampedArray への応答で ArrayBuffer を変換する際の問題ですか? 異なる配列タイプを使用する必要がありますか? それは XMLHttpRequest ですか? これは可能ですか？