問題タブ [putimagedata]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - html5 getImageData の次に putImageData を実行すると、画像がフェードします
私はHtml5に非常に慣れていないので、誰かがこれに光を当てることができるかどうか疑問に思っていました:
Html5 に関する私の限られた知識によると、このコードは「画像」を継続的に表示する以外には何もしないはずです。しかし、代わりに、画像は非常に急速にほぼ白に燃え尽きます。これは、キャンバスから読み取られるか、キャンバスに書き込まれるたびに imageData がわずかに変更されることを示唆しています...
基本的に、マウスを動かしたときに背景画像が透けて見えるように、マウスが配置されている画像をフェードさせたいと思っていました。これを回避する方法はありますか、それともプロセスでもう少しクリエイティブになる必要がありますか? 毎回キャンバスから取得するのではなく、「画像」ImageDataを操作できる方法はありますか?
事前に感謝します.jpgとpngを使用して、image.srcではなくDOMにロードしようとしましたが、すべて同じ問題があります.
ちなみに最新のChromeを使用しています。
SetTimeout へのフェイルオーバーを使用してさまざまなブラウザーを処理する requestionAnimationFrame のセットアップを次に示します。
これがキャンバスのコードです
これがこのコードのすべてです。
canvas - html5 キャンバスのピクセル操作と変換
putImageData は変換の影響を受けないため、画像内のピクセルを操作して結果に対して変換を使用するにはどうすればよいですか? たとえば、写真の赤を明るくしてから、写真を 36 度回転させたいとします。
回転できないため、 putImageData を使用することは答えではないようです。新しいキャンバスに配置して drawImage(newCanvas,0,0) を使用しようとしましたが、画像をまったく描画しませんでした。
私は困惑しています。
javascript - javascript Image Data Object to Image Object (画像データでfill()しようとしています)
私がやろうとしているのは、 context.createImageData(xxx,xxx) を取得してその画像データを操作し、次に画像データを使用して context.createPattern(imagedata, 'repeat') を作成し、描画されたオブジェクトに画像データを入力することです手続き的に作りました。私が抱えている問題は、createPattern がイメージ データ オブジェクトではなくイメージ オブジェクトを取り込むことです。そのため、画像データ オブジェクトを画像オブジェクトに変換する方法を見つけるか、手続き的に生成された画像で fill() を行うより良い方法を提供する必要があります。
ご協力いただきありがとうございます！！
javascript - javascriptでimageDataから画像を生成するには?
以前にキャンバス要素から取得した imageData から新しい画像を作成する方法があるかどうか知りたいですか?
私は解決策を探しましたが、それらはすべて結果をキャンバスに描画しているようです。したがって、可能であれば、基本的に ImageData オブジェクトを Image に直接変換する方法が必要です。
javascript - キャンバス内のピクセルを繰り返し処理し、それらの一部を別のキャンバスにコピーする最速の方法
2D/3D グラフィック プロジェクトに参加していますが、パフォーマンスの問題に直面しています。
私のアルゴリズムは、写真と相対グレースケール深度マップの 2 つの画像を取ります。また、最初は空白の 10 個のキャンバス (「レイヤー」) の配列もあります。注: すべての画像は同じ寸法です。
深度マップのすべてのピクセル X;Y をチェックし、その色の値に応じて、10 個のキャンバスのいずれかにアクセスし、元の画像の X;Y ピクセルを描画する必要があります。
結果のアルゴリズムは次のようになります。
このようなループは、200x200 の画像で完了するのに約 3 分かかります! 遅いのは最後の関数 putImageData が原因であることは間違いありません。必要な方法でピクセルを描画するより高速な方法はありますか? ありがとうございました
javascript - pdf.jsとImageDataを使用して.pdfを単一のCanvasにレンダリングします
PDF.jsを使用して.pdfドキュメント全体を読み取り、すべてのページを1つのキャンバスにレンダリングしようとしています。
私のアイデア：各ページをキャンバスにレンダリングしてImageData（context.getImageData（））を取得し、キャンバスをクリアして次のページを実行します。すべてのImageDataを配列に格納し、すべてのページがそこに配置されたら、配列のすべてのImageDataを単一のキャンバスに配置します。
だから私が理解している方法から、これはうまくいくはずですよね？これを実行すると、PDFのすべてのページを含めるのに十分な大きさのキャンバスになりますが、PDFは表示されません...
助けてくれてありがとう。
javascript - putImageData を使用して、キャンバス上のピクセル配列から画像を描画します
画像を暗号化し、復号化された画像をキャンバスに再描画できるプロジェクトに取り組んでいます。私はまだコーディングとプログラミングにかなり慣れていないので、現在、R、G、B、A 形式のピクセル配列である復号化された画像データを再描画する際に問題が発生しています。データを入れるだけでこれが可能になると思いました
しかし、firebug は、値が imagedata のインターフェースを実装していないことを教えてくれます。配列全体をここに投稿しました。画像は幅160px、高さ120pxです。
キャンバスに描画できるように配列を再フォーマットする方法はありますか?
