問題タブ [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 に答える
7293 参照

javascript - jQueryを使用して見つかった画像を渡したときにHTMLCanvasContext.drawImage()が失敗する

私のコードのアイデアは、画像をロードする隠しdivを作成することです。ロードイベントが発生したら、キャンバスに描画します。コードを実行すると、このエラー0x80040111(NS_ERROR_NOT_AVAILABLE)が発生しますが、ロードイベントを待機しています。これが私のコードです。

HTML

およびjavascript

elseの部分は今のところコメントアウトされていますが、canvasをサポートしていないブラウザ用にあります。

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

graphics - Graphics.DrawImageが暗くなりましたか?

DrawImage Image関数を使用して、画像から別の画像に一部をコピーします。コピーした部分を「暗く」することはできますか?特別な色調?誰かが私に例を教えてもらえますか?ImageAttributesと呼ばれるものを聞いたのですが、見つかりません!

注:ソース画像を編集したくありません。

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

javascript - キャンバスのクリアの問題。Canvasteroidsでクリアされないオブジェクトを選択します

html5キャンバスを使用して新しい小惑星ゲームを作成しています。ステージにレーザーを動的に描画しなければならないところまで順調に進んでいます。それらは正しく描画されず(長さは10ピクセルのみである必要があります)、10秒以上離れて2回撮影すると、古いレーザートレイルが表示されます。これがURLです。これは、私が気にかけているよりも多くのコードがあるためです。

http://marccannon.com/canvasteroids/

理想的には、レーザーの長さは10ピクセルで、寿命が尽きると(1秒または33フレーム)消えます。それらshift()は、描画ループで実行されていないはずの配列から抜け出します。Laserオブジェクトクラスにはある種のメモリがあるようです。これまで、ヒットする実際の小惑星を追加する代わりに、レーザートレイルを使用して宇宙アートを作成するのに何時間も費やしてきました。誰か助けてください。私は正気を失っています。

よろしくお願いします。

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

java - drawImage Java API

drawImage(Image img, int x, int y, Color bgcolor, ImageObserver オブザーバー)

上記の方法で背景色にヌル色を指定したいです。デフォルトは黒です。bgcolor の引数に null を指定できると思ったのですが、うまくいきません。何か案は?

私は使用しています

drawImage(img, 0, 0, null, this);

それは機能しますが、色が必要ない場合は黒を描くだけです。

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

javascript - キャンバス内の画像の準備完了状態

キャンバスで imagename.readyState を使用することは可能ですか?

「drawImage」を使用してキャンバスに描画されている画像が読み込まれ、表示する準備ができたことを検出する方法を誰も知らない場合は?

キャンバスを使用して画像ショーケースを作成しています - 画像が選択されたときに、ロードされた条件が満たされるまで、(既に作成した) ロード アニメーションを表示したいと考えています。

私はまだJavaScriptの使い方を学んでいて、一日中無駄にしようとしてきました.

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

bitmap - Graphics.DrawImageによってスケーリングされたピクセルを正確にマッピングする

Graphics.DrawImageビットマップのストレッチと描画に使用するWinformsアプリケーションがあり、ソースピクセルが宛先にどのようにマップされるかを正確に理解するための支援が必要です。

理想的には、次のような関数を記述したいと思います。

これは、ソース画像のピクセル座標を取得し、スケーリングされた宛先のそれに対応する「左上」ピクセルの座標を返します。

わかりやすくするために、2x2ビットマップが4x4にスケーリングされる簡単な例を次に示します。

ズームの例

矢印は、ポイント(1,0)をMapPixelにフィードする方法を示しています。

(2,0)の結果を与える必要があります。

次のようなロジックを使用して、上記の例でMapPixelを機能させるのは簡単です。

dst.Widthただし、この単純な実装では、がの倍数ではない場合、丸めが原因でエラーが発生することに気付きましたsrc.Width。この場合、DrawImageは、画像をフィットさせるために他のピクセルよりも大きく描画するためにいくつかのピクセルを選択する必要があり、そのロジックを複製するのに問題があります。

次のコードは、2x1ビットマップをいくつかの異なる幅にスケーリングすることで問題を示しています。

元のsrc画像と出力dst画像は次のようになり、MapPixelが青いピクセルをどのようにマッピングする必要があるかを示すいくつかの数字が表示されます。

スケーリングの例

DrawImageがどのピクセルを大きくするかをどのように決定するかを私は一生理解できません。切り上げることもあれば、切り下げることもあるようです。どちらを選択するかは気にしませんが、関数が正しく機能するためには予測可能である必要があります。

上記のMapPixelの例を使用するように変更してみましたが、最も近い奇数MidpointRounding.AwayFromZeroに丸める関数に置き換えました(結果はわずかに改善されますが、それでも完全ではありません)。また、Graphicsクラスにスケーリングを処理させてみました。つまり、設定し、呼び出してから、を使用して座標を変換しようとしました。興味深いことに、TransformPointsメソッドの結果は、DrawImageおよびDrawImageUnscaledの結果とも常に一致するとは限りません。Math.RoundScaleTransformDrawImageUnscaledTransformPoints

また、ヒントを得るためにGDI +を掘り下げてみましたが、まだ有用なものは何も見つかりませんでした。

着地する場所の予測可能性を維持するためだけに、各ピクセルを個別にペイントする必要はありません。

ご参考までに、私が使用している理由はInterpolationMode.NearestNeighborアンチエイリアシングを回避するためであり(個々のピクセルの忠実度を維持する必要があります)、PixelOffsetMode.Halfそこにない場合はDrawImageがビットマップを0.5ピクセルパンするため含まれています。

問題点のさらにいくつかの例には、4pxから13pxにスケーリングする場合のx = 7、および4pxから17pxにスケーリングする場合のx=8が含まれます。

必要に応じて、完全な単体テストコードを投稿できます。これにより、MapPixel関数をドロップインして検証できます。これまでのところ、100%の精度を達成できた唯一の方法は、各ピクセルが一意の色に設定された「ヒント」ソース画像を生成する醜いハックを使用することです。ヒント画像の色を確認し、拡大縮小したヒント画像でその色を探すことで、座標をマッピングします。最適化は可能です(たとえば、ヒント画像は1ピクセルの幅または高さであり、上記の単純なロジックを使用しておおよその答えを推測し、そこから外側に向かって作業します)が、それでも醜いです。

誰かがDrawImageの背後にある配管に光を当てて、MapPixelのより単純な(しかしまだ正確な)実装を考え出すのを手伝ってくれたら幸いです。

0 投票する
3 に答える
1457 参照

java - シンボル メソッド drawImage(SlidingBlockModel, int, int, int, int,)

スライディングブロックゲームを作ろうとしています。このクラスでは、Graphics オブジェクト g2 の drawImage メソッドを使用して、「パズル」のブロックを表示するために drawImage メソッドを使用しました。しかし、ペイント クラス メソッドで、次のエラーが表示されます: シンボル メソッド drawImage(SlidingBlockModel, int, int, int, int, ) が見つかりません。助言がありますか?これを読んでくれてありがとう。前もって感謝します。:)

ゾイ

コードは次のとおりです。

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

javascript - 奇妙なキャンバス描画動作

私は、企業が特定のレポートをオンラインで完成できるようにする CodeIgniter アプリケーションを持っています。レポートの一部は、損傷が発生した車両に表示できることです。私は彼らが描くことができるキャンバスを持つことによってこれを行いました.

問題は、インパクトなどを示すために矢印を描く背景画像 (車) を描画する際に、非常に奇妙な動作が発生することです...

これがJavascriptです(スクリプト全体の一部として):

これはすべて vehicle_canvas.js というスクリプトの一部です。ここで、奇妙な動作が発生します。このスクリプトは

<script type="text/javascript" src="/intranet/js/vehicle_canvas.js"></script>

/intranet/application/views/view_instruction.php にあるビュー ファイル

スクリプトは車両の画像を描画していませんでしたが、他のすべてを正しく実行していましたが、突然機能しました。その理由は、誤って vehicle_canvas.js を /intranet/ ではなく別のフォルダー /intranet/pdfs/ にアップロードしたためです。 js/. /pdfs/ からスクリプトを削除すると、機能しなくなります。/pdfs/ は、ビュー ファイルまたは Javascript 呼び出しのどこにも発生しません。

何か案は?

参照用のドキュメント ツリーは次のとおりです。

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

javascript - Iphone Web アプリでキャンバス drawImage() 関数を使用する

私はiPhone用のWebアプリに取り組んでいます。キャンバス drawImage() 関数を使用して線、アーク、円、およびいくつかの画像を描画するキャンバスを使用する Web ページがあります。ページは、windows chrome、windows safari、OSX chrome、および OSX safari では正常に読み込まれ、実行されますが、iphone safari では実行されません。

drawImage() 関数で止まっているようです。Iphone が canvas の drawImage 関数をサポートしているかどうかについての情報を検索しましたが、何も見つかりません。私は何を逃したのですか?

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

javascript - createElement('canvas')コードはSafariでは機能しますが、Firefox、Chromeでは機能しません

画像を取得し、そのデータを変数にロードする簡単なクエリを試しています。このコードはSafari(5)で機能しますが、Firefox(Macの場合は3.6.3)またはChrome(Macの場合は10)では機能しません。

コードは次のとおりです:http://jsfiddle.net/saTzx/

何がうまくいかない可能性があるか考えていますか?

このコードに関連するもう1つの質問は、drawImage()が実際に画像を描画するべきではないかということです。これはどのブラウザでも発生しません。