問題タブ [getimagedata]

私は（初心者）webglでアプリケーションを構築しようとしています。画像の配列をロードして、ピクセル操作を実行したいところまで来ました。配列内のすべての画像の最初のピクセル列を取得し、それを使用して新しい画像を作成しようとしています。次に、この新しく生成された画像を別の配列にプッシュします。（その後、次の列などを取ります。）

これは、2Dキャンバスに画像を描画してから、ピクセルを読み戻すことで実現しています。数回再帰した後、目的の画像を取得し、base64エンコーディング（およびPNGlib.jsライブラリ）を使用して配列に書き込みます。

問題は、ページを読み込んだときにテクスチャがすべて黒のままになることです。これは、手動でページをリロードするまではそうです。

http://home.scarlet.be/~cornetp/（firefox 4でのみテスト済み）

誰かがそれを見ることができれば、私は画像をすぐに表示したいです、

ありがとう、

HTML5 と Javascript で 2 つの画像を比較するスクリプトを作成しようとしています。しかし、何らかの奇妙な理由で、画像が完全に同じであることが常に返されます。

そして、何が問題なのかを調べたところ、すべてのピクセルのすべてのデータ値が何らかの奇妙な理由で「0」を返していることがわかりました。

それで、私が間違ったことについて何か考えはありますか？:)

なんだかとてもシンプルな気がしますが、canvas 要素について知ったばかりなので、そうです。

これは私のコードです:

3x3の画像があります。CanvasPixelArray は次のとおりです。

すべてのピクセルのアルファを 0 に変更し、次のように戻します。

すべてのピクセルが黒くなりました。ブラウザは、メモリを節約するために色を黒に変更しました。これを防ぐ方法はありますか、または重複を保存する必要がありますか?

私の質問は繰り返しのようですが、これに対する明確な解決策を得たいと思います。

Jfreecharts を使用して 1 つの jsp ドキュメント (同じプロジェクトの画像/ファイルの下に保存) を使用してグラフ (.jpg または .png 型) を生成しており、それを別のドキュメントに表示したいと考えています。

グラフを動的に生成することはできますが、生成されたグラフを他の jsp ドキュメントに表示することはできません。最初の実行時には何も返されません。その後の実行中に、以前に生成されたチャートを表示します。

jspまたはsmethgで行われた静的バインディングが原因である可能性があると思います。

他のjspドキュメントで動的に作成された画像を表示するには?

貴重な時間をありがとうございました...

したがって、パーツ内に作成した「コンテキスト」変数でこの関数 getImageData を使用しています。<script>長方形を描画してから ctx.getImageData.data[0] を実行すると、赤が表示されますキャンバスに描いた長方形の値。しかし、画像をインポートしてキャンバスに描画し、 getImageData.data[0] を使用しようとすると、意味がありません。なぜ画像を正しく読み取っていないのかわかりません。これについてチュートリアルを試してみましたが、それらはすべてあいまいで、一緒に書かれたセグメントしかありません。

したがって、長方形を描画すると、その色の値は問題なく表示されますが、キャンバスに長方形を描画しなくても、画像を描画すると、その特定のピクセルの値が得られません。

誰かが私を助けることができますか？これが私の現在のコードです：

私はWindows用のHTML5ゲームエディタであるConstruct2の開発者です。http://www.scirra.comにあります。

最近、キャンバス上で画像を変換して画像を変更する機能を追加しようとしています。非常に簡単です。キャンバスに画像を描画し、呼び出しgetImageData()てピクセルを取得します。

ユーザーがアプリケーションで[プレビュー]をクリックすると、すべてのファイルがディスク上の一時ファイルにダンプされ、ブラウザが起動して表示されます。サーバーにアップロードすることはプレビューのオプションではありません-一部のゲームはメガバイトの大きさです。

ただし、ほとんどのブラウザは、ディスクからロードされた画像getImageData()のピクセルを取得するために使用することをまったくブロックします。MDNがfile：//アクセスポリシーの説明で示唆しているように、必要なすべての画像ファイルをサブディレクトリに配置しようとしました。それもうまくいきません！

Chromeの--allow-file-access-from-filesフラグで修正されています。ただし、すべての主要なブラウザをサポートする必要があります。少なくともInternetExplorerとFirefoxに同様の回避策はありますか？Internet Explorerについてはわかりませんが、Firefoxのabout：configに手動でアクセスする必要がないものがあればいいのにと思います。そうしないと、「Firefoxで機能しないのはなぜですか？」というサポートリクエストが殺到します。

また、なぜこのセキュリティポリシーが必要なのですか？！？それはやり過ぎのようで、私たちのようなアプリケーションを書くのは本当に難しいです。

助けていただければ幸いです。

マウスの下の RGB 値のピクセルを取得することは可能ですか? これの完全な例はありますか？これが私がこれまでに持っているものです：

作成しているJavaScriptゲームの視覚効果を作成しようと取り組んでいますが、スプライトの色を調整するために使用しているコードによって、ブラウザーのメモリ使用量がどんどん増えていることに気付きました。一見無制限に見えます。

ここでコードとメモリリークを確認できます：http： //timzook.tk/javascript/test.html

このメモリリークは、新しいImageDataオブジェクトを再色付けするために、フレームごとに（setIntervalを介して）キャンバスコンテキストからgetImageDataを呼び出すときに、updateimage（）関数でのみ発生します。javascriptのガベージコレクターが古いものを破壊すると思っていたでしょうが、そうでなければ、手動で破壊する方法がわかりません。なぜこれを行うのか、またはそれを修正する方法を理解するための助けをいただければ幸いです。

私の質問はこれに非常に似ています：getImageData、javascript、HTML5キャンバスのこの使用でメモリリークは何ですかしかし、setIntervalによって呼び出される関数内のすべてのフレームを実行するためのコードが必要です、setInterval関数の外に移動する彼のソリューションは私には選択肢がありません。彼がそれを解決する他の方法を見つけたかどうかを尋ねるコメントを残すことはできません。

テストする人への注意：この例ではgetImageDataを使用しているため、.htmlファイルにスローするだけではローカルでテストできません。Webサーバーが必要です。また、明らかにHTML5要素を使用しているため、一部のブラウザはそれを使用できません。

編集：*解決済み* ありがとう、以下の解決策で修正されました。drawImage（）で画像を使用するのと同じようにcanvas要素を使用できることに気づかなかったので、コードを再構築して、メモリの使用量を大幅に減らしました。誰かが見たい場合は、この変更されたコードを上記のリンク先のページにアップロードしました。

こんにちは親愛なるコミュニティ。

Flickr から取得した画像から抽出色を作成しようとしています。getImageData() を使用してキャンバスでその画像を処理しようとすると、すべてが非常にうまく機能します。

WHATWGで説明されているように、画像をキャンバスにロードするときにフラグを設定するため、それを操作できません。私の質問は、FLICKR は CORS をサポートしていますか?

画像処理も試してみましたが、とても重い処理です (250 枚の画像を処理するのに約 4 分かかりました)。

手がかりがある場合は、私に連絡してください。

環境: Mac OSX、HTML5、jQuery

私は小さなHTML5ゲームをやっていて、マップの最初にスプライトをロードしながら、GetImageData（）/すべての画像をループする/ PutImageData（）で処理を行います。

これは私のPCでは素晴らしくうまく機能しますが、私の携帯電話ではひどく遅いです。

私はいくつかの非常に基本的なベンチマークを行ってきましたが、GetImageDataとPutImageDataはどちらも非常に高速に実行されます。時間がかかるのは、コンテンツのループです。

今、私は明らかに電話の速度が低下すると予想していますが、1000xは少し過剰に聞こえ、HTCでの読み込みには約4分かかるため、機能しません。また、ゲーム内の他のすべては非常に妥当な速度で動作します（主に画面が途方もなく小さいためですが、それでも携帯電話のJSでは驚くほどうまく動作します）

この処理で私が行っているのは、基本的にスプライトを特定のレベルまで「暗くする」ことです。すべてのピクセルをループして、値<1を掛けるだけです。これですべてです。

これは遅すぎるので...すべてのピクセルを1つずつループせずに、Canvas機能（合成、不透明度など）を使用して、同じことを行うためのより良い方法はありますか？

注：このレイヤーには、100％透明なピクセルと、100％不透明なピクセルがあります。どちらも100％不透明または100％透明のままにする必要があります。

私が考えていたことがうまくいかない：
1）不透明度の低い新しいキャンバスにスプライトをペイントする。スプライトを不透明に保ち、暗くする必要があるため、これは機能しません。
2）スプライトをペイントし、その上に半透明の黒い長方形をペイントします。これにより、それらは暗くなりますが、透明なピクセルは透明ではなくなります...

何か案は？

これは私が使用しているコードです。ひどくばかげたものが含まれている場合に備えて、次のようにします。

編集：これは私が画像でやろうとしていることの例です：
オリジナル：http：
//www.crystalgears.com/isoengine/sprites-ground.png暗くした：http ：//www.crystalgears.com/isoengine /sprites-ground_darkened.png

ありがとう！
ダニエル