問題タブ [drawimage]

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.

0 投票する
2 に答える
1482 参照

java - サブディレクトリに保存された画像ファイルをJavaで描画する方法

Java で画像を作成しようとしていますが、現在、ローカル ディレクトリにある画像を使用していますが、正常に動作しています。ただ、画像をフォルダに入れ、画像のパスを参照して描画できればいいのですが、今のところそれができていません。

現在、私のコードは基本的に次のとおりです。

iconPath がローカル パスである限り、これは正常に機能します。しかし、ローカル以外のパスやサブディレクトリで機能させる方法がわかりません。

0 投票する
1 に答える
1550 参照

c# - DrawImageを使用したC#のスケーリングされた画像JPG、PNGの描画が正しく見えない

ユーザー コントロールの背景に画像 (JPG、TIFF、PNG) を描画しようとしています。私のユーザー コントロールは、Rectangles を使用して画像の特定の部分を強調表示します。スケーリングされていない画像を描画すると、正しく見えます。しかし、描画してから [ページに合わせる] を拡大すると、画像が正しく表示されません。PNG の場合、画像の読み込みに失敗することさえあります。

アプリケーションは画像処理アプリではありませんが、画像を拡大縮小して表示したいので、画像を適切に表示できます。

ありがとう --HAN

0 投票する
2 に答える
7260 参照

c# - C# で一連のビットマップを描画する最速の方法

カメラ (30fps @ 640x480) からビデオ フレームをキャプチャして処理し、Windows フォームに表示するアプリケーションを構築しています。最初は DrawImage (以下のコードを参照) を使用していましたが、パフォーマンスはひどいものでした。処理ステップを無効にしても、2.8GHz Core 2 Duo マシンで 20fps が得られます。Windows フォームでダブル バッファリングが有効になっていると、ティアリングが発生します。

注: 使用されるイメージは、Format24bppRgb 形式のビットマップです。DrawImage は Format32bppArgb 形式の画像を使用すると高速になるはずですが、フレーム グラバーから出力される形式によって制限されます。

Textures と Spites (以下を参照) で Managed DirectX 9 を使用してみましたが、パフォーマンスはさらに低下しました。私は DirectX プログラミングに非常に慣れていないため、これは最適な DirectX コードではない可能性があります。

XP、Vista、および Windows 7 で動作させるには、これが必要です。XNA または OpenGL を試す価値があるかどうかはわかりません。これは、達成するのが非常に簡単なことのように思えます。

0 投票する
1 に答える
8447 参照

javascript - canvas drawImage は初めて画像を描画しません

HTML5 キャンバスを使用した単純な JavaScript ゲームに取り組んでいます。これは、以下を含む非常に典型的なゲームループのセットアップです。

  • プレイフィールドで使用されるオブジェクトを初期化し、いくつかの開始 x/y 位置をランダム化し、同様のセットアップ タスクを行う init() 関数
  • シンプルなキャンバス形状といくつかの画像を含むすべてのゲーム オブジェクトを描画する draw() 関数
  • 25 ミリ秒ごとに draw を呼び出す setInterval

このプロジェクトを開始するときに、init() 関数の最後に setInterval 呼び出しを行ったので、ページをロードするとすぐに描画とアニメーションが開始され、すべてが正常に機能しました。さらに進んだので、読み込み時に完全に入力された静的なプレイフィールドを描画し、ボタンを使用してメインのゲーム ループ間隔を開始したいと思います。そのため、init() の最後に draw() への単一の呼び出しを追加しました。問題は、これを行うと、すべてのキャンバスの形状が適切に描画されますが、キャンバスに画像がレンダリングされないことです。

draw() を数回実行するとレンダリングされます...

...しかし、それはばかげているようです。draw() の単一の呼び出しが機能しないのはなぜですか? オブジェクトを Chrome と Firefox のコンソールに記録しましたが、それらに関するすべてが正常に見えます。それらはすでに適切な img src パスを持っており、作成されてから canvas.2dcontext.drawImage() メソッドを介して呼び出される新しい Image() に割り当てるために渡すことができる開始 x/y 値を持っています。

私はこれをChrome 6とFirefox 3.6.10でテストしていますが、どちらもこの動作に困惑しています。Chrome のコンソールにエラーや問題は表示されませんが、draw() を 1 回だけ呼び出してみると、Firefox はこれをスローします。

キャッチされない例外: [例外... "コンポーネントが失敗コードを返しました: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" 場所: "JS フレーム :: http://localhost/my-game-url / :: drawItem :: 行 317" データ: なし]

Google でそのエラーを検索すると、破損した画像が表示されますが、それらはすべてプレビューと Photoshop で問題なく開きます。

0 投票する
1 に答える
2048 参照

canvas - WebkitキャンバスのdrawImage()とキャンバスの非整数スケールファクタのバグ?

既に整数以外の倍率を持つキャンバスに画像が描画されている場合、キャンバス コンテキストの drawImage() メソッドに問題があります。このような画像は奇妙な方法で切り取られているようです (画像の一番右の部分が切り取られる場合もあれば、最も下側が切り取られる場合もあれば、両方が切り取られる場合もあります)。この問題は、少なくとも Google Chrome 6 (少なくとも安定版)、Chromium 6、おそらく最新の (開発) ビルド、さらには Safari 5 で発生します。Firefox にはこのバグはありません。明らかに、私が間違っていなければ、これは Webkit の問題です。次のコードを見てみましょう (デモ用にコード全体を提供)。

それで、それは本当のバグですか?または、回避策はありますか?

前もって感謝します。

更新:

次の BASE64 でエンコードされた 3x5 画像があるとします。

0 投票する
1 に答える
1402 参照

javascript - JavaScript キャンバス ジェネリック drawImage

このチュートリアルで教えられているように、drawImage を使用して一部のビデオを爆発させてい ます。

drawImage を使用して他のオブジェクトも操作できるようにしたいと考えています。問題は、画像/ビデオ (たとえば、Iframe) 以外でこれを試みると、型エラーが発生することです。

  • これを回避する方法はありますか?
  • HTML5 ページで任意のコントロールの「ピクセル」を取得する方法はありますか?
0 投票する
2 に答える
14086 参照

c# - .DrawImage() を使用してマウス オーバー ツールチップを画像に追加するにはどうすればよいですか

これが可能かどうかはわかりませんが、Graphics メソッド - DrawImage を使用して画像にツールチップを動的に追加しようとしています。画像がマウスオーバーされたときなどのプロパティやイベントが表示されないため、どこから始めればよいかわかりません。私はWinFormsを使用しています(C# - .NET 3.5)。アイデアや提案をいただければ幸いです。ありがとう。

0 投票する
1 に答える
848 参照

javascript - canvas + JavaScript で降る雪に雲 (画像) を挿入する最も簡単な方法

webbreakstuffから Canvas の降雪ソリューションを採用しました。

今度は、この雪が雲から降ってきたように見せたいと思います。

私は雲のイメージを持っていcloud.pngます。

次のように JavaScript で作成したいと思います。

今、私はそれを2つのキャンバスの1つ(bgcanvasまたはfgcanvas)の前に描画させたいのですが、 に従って適切にそれを行う方法がわかりませんcontext.drawImage

誰かがこの画像をどこに置くべきか、そしてその方法を理解するのを手伝ってくれませんか?

ありがとう。

0 投票する
2 に答える
6832 参照

c# - グラフィックライブラリC#を使用して画像の上に小さな画像を描画するにはどうすればよいですか?

グラフィックライブラリC#を使用して別の画像の上に画像を描画しようとすると、小さい画像が拡大縮小され、最初の画像が覆われます。

0 投票する
2 に答える
4736 参照

gdi+ - 白い背景を持つJPGのGDI + DrawImageは白ではありません

GDI+ を使用して C++ CWnd ウィンドウに JPG を表示しています。JPG の背景は 0xffffff の真っ白ですが、graphics.DrawImage を使用して表示すると、背景はオフホワイトで、0xfff7f7、0xf7fff7、0xf7f7f7 などのピクセル カラーが混在しています。以下はコードです。CompositingMode、SmoothingMode などのさまざまな設定を試しました。画像はスケーリングされません。

奇妙なことに、画像内の他の白以外のコンテンツによって背景色が異なります。単純なすべて白の JPG を作成すると、それは機能します。または、黒のテキストだけを含むほぼ白の JPG でも機能します。画像の比較を以下に示します。

ここでは、画像の左側にのみテキストといくつかのブレンディングがあります (アルファなし、これは JPG) 。右側はすべて真っ白です。背景がすべて灰色になっていることがわかります。

代替テキスト

ここで、内部コンテンツの削除を開始しました (左側のみ)。ある時点の後、背景全体が白く表示され始めます。???

代替テキスト

画像領域の大部分を削除する限り、白が表示される前に画像領域のどの部分を削除しても問題ありません。png についても同様です。

これが元のtest.jpg画像です...

代替テキスト