質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2905閲覧

Vue.jsとcanvasを組み合わせて画像を表示させたい

DKI

総合スコア11

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/04/07 02:52

vueのコンポーネント内でcanvasを使用して画像を読み込ませたいが、image.onloadの部分でエラーが表示される。

エラー文

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. at Image.image.onerror (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Canvas.vue?vue&type=script&lang=js&:57:13)

→キャッチされないDOMException:「CanvasRenderingContext2D」で「drawImage」の実行に失敗しました:提供されたHTMLImageElementは「壊れた」状態です。

コード

JavaScript

1<template> 2 <div> 3 <div id="canvas-area"> 4 <canvas 5 id="myCanvas" 6 width="250px" 7 height="250px" 8 class="canvas" 9 ></canvas> 10 </div> 11 <img src="@/assets/img/title.jpg"> 12 <v-btn 13 @click="imageDraw(this.canvas)" 14 > 15 表示 16 </v-btn> 17 </div> 18</template> 19 20<style scoped> 21#myCanvas { 22 border: 1px solid #000000; 23} 24</style> 25 26<script> 27export default { 28 name: "Canvas", 29 props: [ 30 "NewAuthor", 31 "newTitleName" 32 ], 33 data() { 34 return { 35 canvas: null, 36 context: null, 37 isDrag: false, 38 max_width: 250, 39 max_height: 250, 40 }; 41 }, 42 mounted() { 43 this.canvas = document.querySelector("#myCanvas"); 44 this.context = this.canvas.getContext("2d"); 45 this.imageDraw(this.canvas); 46 }, 47 methods: { 48 imageDraw: function (canvas) { 49 let image = new Image(); 50 image.src = "@/assets/img/k01.jpg" 51 const ctx = canvas.getContext("2d"); 52 console.log("image-first",image); 53 54 // キャンバスに画像を描画(開始位置0,0) 55 image.onload = function() { 56 ctx.drawImage(image, 0, 0); 57 console.log("image-onload",image); 58 }; 59 image.onerror = function(e) { 60 ctx.drawImage(image, 0, 0); 61 console.log("error", e); 62 63 } 64 console.log("image-final",image); 65 console.log("image-width",image.width); 66 console.log("image-heigth",image.height); 67 }, 68 }, 69} 70</script>

img srcでは画像は表示されているため、画像ファイルやパスは間違っていないはずです。
エラー文はonerror内のものになっています。

おそらくonloadかgetContext('2d')かdrawImage()の書き方あたりが間違っている。
もしくはimageの中が違うのかなと思います。

console.log("image-final",image);

→実行結果
<img src="@/assets/img/title.jpg">

となり、imageにも正しくデータが入っているかと思われます。

いろいろ調べてみましたが、このやり方でなぜエラーが出るのかわかりません。

教えていただけると助かります

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/04/07 07:53

Vue.js は詳しくないので的外れだったら申し訳ないのですがが、new Image().src のようなローレベルな属性に対しても@をつかったエイリアスのパスをwebpackが処理してくれるものなのでしょうか? つまり、 console.log("image-first",image); による <img src="@/assets/img/title.jpg"> と、 <img src="@/assets/img/title.jpg"> がブラウザ上のHTMLに展開された場合のパス は、同じものなのでしょうか?
DKI

2021/04/07 11:33

はい!同じものだと思います
Lhankor_Mhy

2021/04/07 14:14

当方の環境では、やはり異なるものでした。
DKI

2021/04/07 14:20

念のため image.src = "../assets/img/title.jpg" としてみましたが、画像は表示されませんでした。 <img src="../assets/img/title.jpg"> これは正しく表示されます
Lhankor_Mhy

2021/04/07 14:23

Vue.js は詳しくないので、当方が間違えているかもしれません。 同じものである、というのはどのようにして確認したか教えてもらえますか?
DKI

2021/04/07 14:32

コンソールのログを出しました! どちらでも同じものが表示されました!
Lhankor_Mhy

2021/04/07 14:36

コードを拝見する限り、コンソールに出しているのは imageDraw の中だけだと思いますが、ブラウザ上のHTMLに展開されたimg要素のsrc属性と一致することは、どのように確かめたのですか?
Lhankor_Mhy

2021/04/07 14:38

回りくどいですかね……? ブラウザのデベロッパーツールで、表示されているimg要素のsrc属性を検証しましたか?ということをお伺いしています。
Lhankor_Mhy

2021/04/07 14:39

もっと言えば、ブラウザ上では @/assets/img/title.jpg というパスは有効ではないことを理解されていますか?ということをお伺いしています。
DKI

2021/04/07 15:23

はい!理解できました!
DKI

2021/04/07 15:24

しかし、問題はそこではないようです。
Lhankor_Mhy

2021/04/08 00:40

そこが問題だと思うんですが……
DKI

2021/04/08 03:20

pathの中身を ../assets/img/title.jpg としてみましたが解決しませんでした。 こちらimgタグで表示させるとしっかり表示されるのでパスはあっているかと思われます
Lhankor_Mhy

2021/04/08 03:39

>解決しませんでした。 assetsフォルダは公開されないですからね…… >imgタグで表示させるとしっかり表示されるのでパスはあっている それはパスが解決されているから、というのはご理解いただけたのですよね……? どうやら、当方の推測どおりの原因のようなので、少し時間をいただければ、回答します。
DKI

2021/04/08 04:14

すみませんが、よろしくお願い申し上げます。
guest

回答2

0

ベストアンサー

当方の環境では、以下のようにすると動作しました。

js

1import imgSrc from "@/assets/img/title.jpg"; 2 3//... 4 5 image.src = imgSrc;

投稿2021/04/08 06:58

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

DKI

2021/04/08 13:37

うおおおお!できました!!!本当にありがとうございます!
guest

0

なんか微妙に記述おかしくないですか?

vue

1 2 <img src="@/assets/img/title.jpg"> 3 <v-btn 4 @click="imageDraw(this.canvas)" 5 >

メソッドの引数にthis.canvasとなってますけど、テンプレートはコンポーネントから返されている値を代入する限り、代名詞が付くはずないですが。

vue

1 2 <img src="@/assets/img/title.jpg"> 3 <v-btn 4 @click="imageDraw(canvas)" 5 >

これで試してみてください。

投稿2021/04/07 06:19

FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

DKI

2021/04/07 07:03

すみません、imageDrawはmountedで呼び出しているので、そこは機能に関係ない部分です。 消しておきます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問