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

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

ただいまの
回答率

88.13%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 81

score 3

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にも正しくデータが入っているかと思われます。

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • DKI

    2021/04/08 12:20

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

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

    キャンセル

  • Lhankor_Mhy

    2021/04/08 12:39

    >解決しませんでした。

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

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

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

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

    キャンセル

  • DKI

    2021/04/08 13:14

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

    キャンセル

回答 2

checkベストアンサー

+1

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

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

//...

      image.src = imgSrc;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/08 22:37

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

    キャンセル

0

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

    <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)"
    >

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/07 16:03

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

    キャンセル

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

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る