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

Question

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は「壊れた」状態です。

コード

<template>
  <div>
    <div id="canvas-area">
      <canvas
        id="myCanvas"
        width="250px"
        height="250px"
        class="canvas"
      ></canvas>
    </div>
    <img src="@/assets/img/title.jpg">
    <v-btn
      @click="imageDraw(this.canvas)"
    >
      表示
    </v-btn>
  </div>
</template>

<style scoped>
#myCanvas {
  border: 1px solid #000000;
}
</style>

<script>
export default {
  name: "Canvas",
  props: [
    "NewAuthor",
    "newTitleName"
  ],
  data() {
    return {
      canvas: null,
      context: null,
      isDrag: false,
      max_width: 250,
      max_height: 250,
    };
  },
    mounted() {
      this.canvas = document.querySelector("#myCanvas");
      this.context = this.canvas.getContext("2d");
      this.imageDraw(this.canvas);
    },
  methods: {
    imageDraw: function (canvas) {
      let image = new Image();
      image.src = "@/assets/img/k01.jpg"
      const ctx = canvas.getContext("2d");
      console.log("image-first",image);

      // キャンバスに画像を描画（開始位置0,0）
      image.onload = function() {
        ctx.drawImage(image, 0, 0);
        console.log("image-onload",image);
      };
      image.onerror = function(e) {
        ctx.drawImage(image, 0, 0);
        console.log("error", e);
        
      }
        console.log("image-final",image);
        console.log("image-width",image.width);
        console.log("image-heigth",image.height);
    },
  },
}
</script>

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

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

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

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

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

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

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

Comments

[Lhankor_Mhy]

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]

はい！同じものだと思います

[Lhankor_Mhy]

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

[DKI]

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

これは正しく表示されます

[Lhankor_Mhy]

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

[DKI]

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

[Lhankor_Mhy]

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

[Lhankor_Mhy]

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

[Lhankor_Mhy]

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

[DKI]

はい！理解できました！

[DKI]

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

[Lhankor_Mhy]

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

[DKI]

pathの中身を
../assets/img/title.jpg
としてみましたが解決しませんでした。

こちらimgタグで表示させるとしっかり表示されるのでパスはあっているかと思われます

[Lhankor_Mhy]

>解決しませんでした。

assetsフォルダは公開されないですからね……

>imgタグで表示させるとしっかり表示されるのでパスはあっている

それはパスが解決されているから、というのはご理解いただけたのですよね……？

どうやら、当方の推測どおりの原因のようなので、少し時間をいただければ、回答します。

[DKI]

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

Answer 1

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

import imgSrc from "@/assets/img/title.jpg";

//...

      image.src = imgSrc;

Comments

[DKI]

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

Answer 2

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

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

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

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

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

Comments

[DKI]

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