自作のjavascriptメソッドのエラーが解決出来ない。

Question

選択した画像を、canvasタグでプレビュー。描画したデータを、画像に変換してデータベースに保存するコードをjavascript(Vue.js)で書いたのですが、canvasが画像に変換されません。

エラーが出ているのは、以下のメソッドです。

  //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
    saveCanvas: function (canvas_id) {
      //canvasタグのidをlet canvasに代入
      let canvas = document.getElementById(canvas_id);

      //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
      let url = canvas.toDataURL("image/jpeg", 0.85);

      // imgタグを作成し、canvasImgに代入
      let canvasImg = document.createElement('img');

      //canvasImgにname属性、"image"をセット
      canvasImg.setAttribute = ("name","image");

      //src属性に変数urlを代入し、canvasImgにセット
      canvasImg.setAttribute = ("src",url);

     //div id="image_area" を取得して、imgAreaに代入
      let imgArea = document.getElementById(image_area);

      //div id=imgArea 内(let imgArea)に変数canvasImg(imgタグ)を追加
      //クリックされたらsaveCanvasメソッドを実行
      imgArea.appendChild(canvasImg).click();
    },

canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Cannot read properties of null (reading 'appendChild')」というエラーになります。。。。

Vueコンポーネント全体は以下のように書いています。

<template>
  <div>
    <div id="image_area">
    <canvas ref="preview" id="preview"></canvas>
    <input type="file" accept="image/*" ref="selectimage" @change="previewImage"/>
    </div>
    <p>
      <input type="text" id="canvas_text" value="我輩は犬である" />
      <button type="button" @click="drawText('preview', 'canvas_text'),saveCanvas('preview')">
        文字を描く
      </button>
    </p>
  </div>
</template>
 
<script>
export default {
  methods: {
   // canvasの画像をinput type="file"にプレビュー
    previewImage: function () {
      let file = this.$refs.selectimage.files; //ファイル情報の取得
      const canvas = this.$refs.preview; //canvasタグ
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const ctx = canvas.getContext("2d");
        const image = new Image();
        image.src = fileReader.result;
        image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0, 0);
        };
      };
      fileReader.readAsDataURL(file[0]);
    },

    //キャンバスに文字を描く
    drawText: function (canvas_id, text_id) {
      const canvas = document.getElementById(canvas_id);
      const ctx = canvas.getContext("2d");
      const text = document.getElementById(text_id);
      //文字のスタイルを指定
      ctx.font = "32px serif";
      ctx.fillStyle = "#404040";
      //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
      ctx.textBaseline = "center";
      ctx.textAlign = "center";
      //座標を指定して文字を描く（座標は画像の中心に）
      const x = canvas.width / 2;
      const y = canvas.height / 2;
      ctx.fillText(text.value, x, y);
    },

  //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
    saveCanvas: function (canvas_id) {
      //canvasタグのidをlet canvasに代入
      let canvas = document.getElementById(canvas_id);

      //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
      let url = canvas.toDataURL("image/jpeg", 0.85);

      // imgタグを作成し、canvasImgに代入
      let canvasImg = document.createElement('img');

      //canvasImgにname属性、imageをcanvasImgにセット
      canvasImg.setAttribute = ("name","image");

      //src属性に変数urlを代入し、canvasImgにセット
      canvasImg.setAttribute = ("src",url);

     //div id="image_area" を取得して、imgAreaに代入
      let imgArea = document.getElementById(image_area);

      //div id=imgArea内(let imgArea)に変数canvasImg(imgタグ)を追加
      canvasImg.appendChild(imgArea);

      //buttonタグをクリックした時にイベントを発生させる
      canvasImg.click();
    },
  },

};
</script>

現状では、データ送信後画像ファイルが空になっています。
canvasタグで描画したデータを画像に変換してデータベースに保存するにはどうすればいいでしょうか？

Comments

[mike2mike4]

同じ事を悩んだことがあって、私は解決しなかったのですが、こういう解答もありました。
https://teratail.com/questions/110638

Answer 1

     //div id="image_area" を取得して、imgAreaに代入
      let imgArea = document.getElementById(image_area);

      //div id=imgArea内(let imgArea)に変数canvasImg(imgタグ)を追加
      canvasImg.appendChild(imgArea);

1. image_area という変数を定義していないので、暗黙的に id="image_area" を持つ要素が参照されます。
2. getElementById() の引数は文字列なので、上の要素が文字列化されて getElementById() に渡されます。"[Object HTMLDivElement]" のようになるので、getElementById() は null を返します。imgArea は null になります。
3. appendChild() は Node の引数が必要ですが、null が渡されたのでエラーとなります。

やりたかったことは下記のようなことでしょうか。

     //div id="image_area" を取得して、imgAreaに代入
      let imgArea = document.getElementById("image_area");

      //div id=imgArea内(let imgArea)に変数canvasImg(imgタグ)を追加
      imgArea.appendChild(canvasImg);

あと、setAttribute() の使い方も間違ってますね。

Comments

[Fukusuke0604]

コメントありがとうございます。getElementById();の引数には文字列で入れないといけなかたんですね。
（image_area という変数を定義していないので）

setAttribute() の使い方に関して、複数の属性を追加する場合には分けて書く。
と認識していました。

もしよろしければ、今回のsetAttribute() の正しい使い方も教えてください。

[int32_t]

canvasImg.setAttribute = (属性名, 属性値);

ではなく、

canvasImg.setAttribute(属性名, 属性値);

です。

[Fukusuke0604]

ありがとうございます。　エラーが出ていなかったので、気づけませんでした。
ドキュメントを見返してもそのように書いていました、（ドキュメントみて書いたつもりだったのですが、、、気づけませんでした。）

[Fukusuke0604]

ありがとうございます。　まだ完全に思うような動作はしていませんが、おかげさまで少しずつ前進しております。　引き続きがんばります。