Q&A
なぜ絶対PATHではだめなのでしょうか。
前提・実現したいこと
canvasで相対パスを使って画像を表示させたい
発生している問題・エラーメッセージ
srcを相対パスで書くと、画像が表示されなくなります。
エラーメッセージは出ていません。
パスの指定は間違っていません。
該当のソースコード
html
1<div class="container"> 2 <canvas ref="canvas" class="main-img"></canvas> 3</div>
js
1<script> 2export default { 3 name: 'MainCanvas', 4 methods: { 5 draw() { 6 const canvas = this.$refs.canvas 7 canvas.height = canvas.width; 8 const ctx = canvas.getContext('2d'); 9 const src = "../assets/images/hoge.png" // ここが相対パスだとうまくいかない 10 const img = new Image(); 11 img.onload = function() { 12 ctx.beginPath(); 13 ctx.drawImage(this, 0, 0, canvas.width, canvas.height); 14 } 15 img.src = src; 16 } 17 }, 18 mounted() { 19 this.draw(); 20 } 21} 22
試したこと
相対パスではなく、絶対パスで書くと画像が表示されました。
追記
相対パスで表示したかったのはcanvas内の画像の保存がしたかったためです。
js
1canvas.toBlob(function(blob) { 2 var newImg = document.createElement("img"), 3 url = URL.createObjectURL(blob); 4 5 newImg.src = url; 6 document.body.appendChild(newImg); 7});
上記のようにしたところ、試しに書いた図形はimg属性として画面に表示されましたが、画像部分は表示されませんでした。
絶対パスだと toDataUrl() で画像URIが取得できないからです。
Fetch API （絶対PATH）の 応答など、Ajaxを用いて一度 Blob() を生成、ObjectURL(BlobURL) を img.src に与えてみるのはどうでしょうか。
https://developer.mozilla.org/ja/docs/Web/API/Response
もう少し詳しく知りたいです、、、
クロスオリジンの ImageをCanvasに描いたとき、直接 DataURLを取得できない。なら、間接的にDataURLの取得を試みます（ドキュメント上の他のオブジェクトを仲介する案です）。
【Ajax経由の方法】は、先程、案内したリンク先の「例」セクションが URL.createObjectURL() を使って image.src に渡しています。
また、CanvasをImage描画用とDataURL取得用とで分けて、描画後に drawImage(canvas, ...args) を使ってコピーする。ImageData （TypedArray:Uint8ClampedArray）をコピーする。といった方法も思いつきます。
> CanvasをImage描画用とDataURL取得用とで分けて、描画後に drawImage(canvas, ...args) を使ってコピーする。ImageData （TypedArray:Uint8ClampedArray）をコピーする。
この方法を試してみましたが、画像部分は表示されませんでした。
回答欄に追記しました。
もし、管理下になく応答ヘッダを変更できない場合は、管理下にあるサーバーを介するしかなさそうです。
回答1件
0
ベストアンサー
相対パスで表示させたい
絶対PATHで扱うほうが、デッドリンクを避けやすいと思います。
追記ここから）
Canvasに表示されないのは CORS が原因と思います。
応答ヘッダーAccess-Control-Allow-Headersも確認してください。
エラーメッセージは出ていません。
フレームワーク環境から一旦離れると、エラーは確認できます。
ローカル環境でクロスオリジンを手軽に確認するのに、hostname を localhost と 127.0.0.1 でアクセスしてみる手法があります。
以下のような簡単なサンプルコードを書き、確認しました。
[test.html]
HTML
1<body> 2 <img id="same" src="http://localhost:3000/t/test.jpg"> 3 <img id="cross" src="http://127.0.0.1:3000/t/test.jpg"> 4 <canvas id="view-canvas"></canvas> 5 <script> 6 let imagePath = document.getElementById("same").src; 7 let imagePathX = document.getElementById("cross").src; 8 let dstCanvas = document.getElementById("view-canvas"); 9 10 Object.assign( new Image(), { 11 src : imagePath, // imagePathX だとエラー 12 onload(event) { 13 let img = event.target; 14 let { width, height } = img; 15 Object.assign( dstCanvas, { width, height }) 16 .getContext("2d") 17 .drawImage( img, 0,0, width, height ); 18 19 console.log( dstCanvas.toDataURL() ); // imagePathX だとエラー 20 21 } 22 }); 23 </script> 24</body> 25<!-- 26以下のディレクトリ構成で確認 27 28public/ 29 t/ 30 test.html 31 test.jpg 32 33-->
{Canvas} の toDataURL() だけでなく、{CanvasRenderingContext2d} の getImageData() など、Canvas関連APIは クロスオリジンに対するセキュリティがあります。
追記ここまで)
ご質問コードに <script> が混入されているのが気になりますが、
モジュール化するのであれば、画像の baseUrl を引数で受け付ける関数を export するなどの方法を取ってはいかがでしょうか。Canvas(に表示するためのHTMLImageElement)を扱う *.html の PATH の変化に耐えられるはずです。
javascript
1// baseUrl は "/" で終わるディレクトリ情報とする 2export default ( baseUrl ) => ({ 3 4 methods:{ 5 draw() { 6 7 const src = baseUrl + "hoge.png" // 絶対パス化する。 8 9 } 10 } 11 12}); 13
投稿2020/05/02 09:18
編集2020/05/03 09:37総合スコア5432
解決しました！！
まず、CORSの設定を見直しました。
それでもできなかったので、その後、下記リンクのコードを参考にダウンロードをさせることができました。
toDataURL() メソッドはなぜか onclick イベント内だと画像も読み込めました。
ありがとうございました！！
https://qiita.com/lookman/items/d93dd62a41f17a4d2de8
あなたの回答
tips
プレビュー
