canvasをJPEG変換し、そのBase64文字列が定数にセットされない。

Question

Canvasに描画した画像ファイルをblob化し、axiosでPOST、POSTされたblobファイルを、Laravel API側で処理、保存をゴールに、Vue.js単一コンポーネントにサイト記事を参考に下記scriptを書いたのですが、

Canvasに描画した画像ファイルをblob化し、axiosでPOSTの処理は以下の用に書いています、

    // Canvasのデータをblob化
    saveCanvas: function (canvas_id) {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85); 
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      const data = new FormData();
      data.append("photo", blob, "image.png"); //'photo'というkeyで保存
    },

    postCanvas: function () {
      axios
        .post("/api/photo", data, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
        });
    },

var dataurl = canvas.toDataURL("image/jpeg", 0.85);

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

エラー箇所の手前で

const canvas = document.getElementById(canvas_id);

として、canvas_idを const canvasにセットしているのになぜ、「Cannot read properties of null」となってしまうのでしょうか？

vue.js 単一コンポーネント全体は以下のように書いています。

<template>
  <div>
    <div id="image_area">
      <canvas ref="preview" id="preview"></canvas>
      <input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage"/>
    </div>
    <p>
      <input type="text" id="canvas_text" value="我輩は犬である" />
      <button type="button" @click="drawText('preview', 'canvas_text')">
        文字を描く
      </button>
    </p>
    <button @click="saveCanvas(),postCanvas()">アップロード</button>
  </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のデータをblob化
    saveCanvas: function (canvas_id) {
      const type = "image/png";
      const canvas = document.getElementById(canvas_id);
      const dataurl = canvas.toDataURL("image/jpeg", 0.85); 
      const bin = atob(dataurl.split(",")[1]);
      const buffer = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
      }

      const blob = new Blob([buffer.buffer], { type: type });

      const data = new FormData();
      data.append("photo", blob, "image.png"); //'photo'というkeyで保存
    },

    postCanvas: function () {
      axios
        .post("/api/photo", data, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then((res) => {
          console.log("success");
        })
        .catch((error) => {
          new Error(error);
        });
    },
  },
};
</script>

Answer 1

    <button @click="saveCanvas(),postCanvas()">アップロード</button>

saveCanvas() に引数を渡してないから canvas が null になるのでは。

Comments

[Fukusuke0604]

コメントありがとうございます。

<button @click="saveCanvas('canvas_id'),postCanvas()">アップロード</button>

としても、toDataURL("image/jpeg", 0.85);の箇所で、
「Uncaught TypeError: Cannot read properties of null (reading 'toDataURL')」
となります。。。

[int32_t]

<canvas> のidは `canvas_id` ではないですよね。

[Fukusuke0604]

saveCanvas: function (canvas_id) で<canvas>タグのidを取得してて、そのまま@click="saveCanvas('canvas_id')で<canvas>タグのidを渡せるものだと思っていました。。。

ありがとうございました。　まだエラーはありますが、今のエラーは解決しました！！