- ベストアンサー
javascriptでのパス指定について
- javascriptを使用してHTML5のcanvas内に画像を表示する際のパス指定方法について教えてください。
- 質問者はSpringMVCのビュー部分でJSPからjavascriptを使用して開発を行っていますが、画像表示時のパスの指定がうまくいかないようです。
- 画像のパス指定方法を教えていただけると助かります。
- shin123xrz
- お礼率33% (1/3)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>img.src = "../sample/abc.png"; //ここでパスを指定。 >/* 画像を描画 */ >ctx.drawImage(img, 0, 0); 忘れてましたが（というかコードを読んでませんでしたが）、 プリロードするか、 img.onload=function(){ctx.drawImage(this, 0, 0);}; などとして、画像の読み込みが完了してからdrawImage()を呼び出すようにしてみてください。 プリロードに時間がかかることもありますから、 .onerrorや.completeなどでエラー処理を行うのが一般的ではないかと思います。 >ユーザーがその画像をマウスで拡縮を行うようなサービスの作成を検討しており、 むしろ、拡大だけならわざわざcanvasを使わなくても <img id="img1" 略> <script>img1.width=300, img1.height=500;</script> で良いのでは？ （Firefoxはdocument.getElementById()で）
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ブラウザのアドレス欄に画像のURLを入力して、直接ファイルを開いたらどういうメッセージが表示されますか？ そのメッセージに従うか、メッセージの対処法を実行してください。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
HTMLで<img src="../sample.abc.png">とするのと同じですよ。 わからなければ絶対パスか絶対URLで書いておけばいいと思います。
補足
taloo様、 ご回答ありがとうございます。 早速../sample.abc.pngで試しましたが、残念ながら表示されません（画像が読み込まれません）。../sample/abc.pngでも試しましたが、同様にうまくいきません。絶対パス/URLでもだめです。開発にはspring frameworkを使用しており、「ビューには/WEB-INF/jsp/*.jspを使用する」等の設定を色々としているので、それが悪さをしている気がしますが、何か追加でアイデアありますでしょうか？
お礼
taloo様、 ご回答ありがとうございます。 以下を試しましたが、やはりうまくいきません。 プリロードのほうは、まだ試していないのですが、以下の方法でNGなので、同様にNGかと思います。 > img.onload=function(){ctx.drawImage(this, 0, 0);}; canvasを使用する理由ですが、canvasにテキストを挿入して、簡単なお絵かきツールのようなサービスを提供しようと思っています。ですので、canvasのほうが使い勝手が良いと思い使用することとしています。
補足
そのご、プロジェクトの設定やらを変更したり、イメージのストア先を変更したらうまくいくようになりました。 Taloo様、 ご丁寧にアドバイス頂きありがとうございました。