問題タブ [putimagedata]

ImageData配列オブジェクトを使用して Image() オブジェクトを取得することは可能ですか? 私の最終的な目標は、（stackoverflowの同様のqと私自身のテストから）遅すぎるため、drawImage代わりに使用することです。私が持っているのは、キャンバス上の既存の画像の上に描画したい配列だけです。putImageDataputImageDataImageData

rgba シーケンス配列を作成する一連の関数があり、このデータをキャンバス オブジェクトに適用する予定です。rgba (すでに 0 ～ 255 の値) を、.putImageData を使用できる適切な imageData オブジェクトに変換する方法がわかりません。

rgba_array 値の出力が値の適切なストリームを示していても、私が得るのは白だけです。

画像の色を反転させようとしています。これで画像は正常にロードされますが、getImageData と putImageData をキャンバスに戻そうとすると、キャンバスは単に空白です。次に、すべての imageData を出力しました。何らかの理由で常に 0 のように見えます。私はこれに真剣に悩んでいます。事前に助けてthxしてください！

各フレームを生の ImageData 形式 (RGBA 順でピクセルあたり 4 バイト) で送信することにより、WebSocket 経由でビデオをストリーミングしています。クライアントで各フレームを ( として) 受け取ったら、 putImageDataArrayBufferを使用して、この画像をできるだけ効率的にキャンバスに直接ペイントしたいと考えています。

これは私の現在の解決策です：

しかし、それはかなり遅いです。理由についての私の理論：

• 配列 (サイズは ~1MB) は、フレームごとに 3 回、 に 1 回、 に 1 回、最後にキャンバスに 3 回 (1 秒あたり 30 回)Uint8ClampedArrayコピーされます。ImageData

• newフレームごとに 2 回使用していますが、これはガベージ コレクターにとって問題になる可能性があります。

これらの理論は正しいですか?もしそうなら、これをできるだけ速くするためにどのようなトリックを採用できますか? ブラウザ固有の回答を喜んで受け入れます。

イメージ内のピクセルを操作し、整数値 (0 ～ 255) を RGBA 値に保存する必要があります。

ImageData を再度取得し、それぞれのインデックスに値を出力すると、次の結果が得られます。

割り当てられた値がレスキューされた値と同じではないため???

ありがとう！

だから私はここで私のコードにいくつかの問題を抱えています。

基本的に、私は自分の画像を取得して、元の画像の x 倍の新しい画像を作成しようとしています。

これを行うには、すべてのピクセルの r、g、b、および a をコピーし、その情報を新しい画像に入れ、それを新しいキャンバスに印刷します。

エラーは発生していませんが、キャンバスにも表示されませんか?

私が間違ったことをした可能性はありますか？

私のコード:

作業コードで更新

これは画像を取得し、アンチエイリアスで拡大します。透明度は維持されませんが、簡単に微調整できます。