編集履歴

質問編集履歴

テキスト修正

2021/12/08 06:44

投稿

Fukusuke0604

スコア554

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -60,7 +60,7 @@
-canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
+canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Cannot read properties of null (reading 'appendChild')」というエラーになります。。。。

テキスト修正

2021/12/08 06:44

投稿

Fukusuke0604

スコア554

test CHANGED Viewed

	@@ -1 +1 @@
1	- 自作のjavascriptメソッドが~~実行され~~ない。~~canvasタグでプレビュー。描画したデータを、画像に変換してデータベースに保存する~~
1	+ 自作のjavascriptメソッドのエラーが解決出来ない。

test CHANGED Viewed

@@ -30,13 +30,183 @@
+      //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: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
+Vueコンポーネント全体は以下のように書いています。
+```javascript
+<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にセット
+      //src属性に変数urlを代入し、canvasImgにセット
       canvasImg.setAttribute = ("src",url);
@@ -60,186 +230,16 @@
     },
+  },
+};
+</script>
 ```
-canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
-Vueコンポーネント全体は以下のように書いています。
-```javascript
-<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>
-```
 現状では、データ送信後画像ファイルが空になっています。

テキスト修正

2021/12/08 06:30

投稿

Fukusuke0604

スコア554

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -36,7 +36,7 @@
-      //src属性にtoDataURL()が代入された変数urlをcanvasImgにセット
+       //src属性に変数urlを代入し、canvasImgにセット
       canvasImg.setAttribute = ("src",url);
@@ -206,7 +206,7 @@
-      //src属性にtoDataURL()が代入された変数urlをcanvasImgにセット
+      //src属性に変数urlを代入し、canvasImgにセット
       canvasImg.setAttribute = ("src",url);

説明に追記を入れました。

2021/12/07 14:17

投稿

Fukusuke0604

スコア554

test CHANGED Viewed

	@@ -1 +1 @@
1	- canvasタグで描画したデータを画像に変換してデータベースに保存~~されない。~~
1	+ 自作のjavascriptメソッドが実行されない。canvasタグでプレビュー。描画したデータを、画像に変換してデータベースに保存する

test CHANGED Viewed

@@ -2,16 +2,88 @@
+エラーが出ているのは、以下のメソッドです。
 ```javascript
+  //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属性にtoDataURL()が代入された変数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();
+    },
+```
+canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
+Vueコンポーネント全体は以下のように書いています。
+```javascript
 <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="我輩は犬である" />
@@ -28,6 +100,8 @@
 </template>
 <script>
 export default {
@@ -114,38 +188,52 @@
-      //canvasをJPEG変換し、そのBase64文字列をlet uriへセット
+      //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
-      let uri = canvas.toDataURL("image/jpeg", 0.85);
+      let url = canvas.toDataURL("image/jpeg", 0.85);
-      //let canvasをimgタグに変換
+      // imgタグを作成し、canvasImgに代入
-      canvas = document.createElement("img");
+      let canvasImg = document.createElement('img');
-      //imgタグのsrc属性にlet uriをセット
-      img.setAttribute =  uri;
-      //imgタグのネーム属性を'image'としてセット
+      //canvasImgにname属性、imageをcanvasImgにセット
-      img.setAttribute = ("name","image");
+      canvasImg.setAttribute = ("name","image");
+      //src属性にtoDataURL()が代入された変数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タグをクリックした時にイベントを発生させる
-      img.click();
+      canvasImg.click();
     },
   },
 };
 </script>
@@ -154,72 +242,6 @@
-今回動作していない箇所は下記です。
-toDataURL()でキャンバス内のデータをdata:形式に変換
-canvasタグをimgタグに変換
-src属性にtoDataURLで取得したデータをセット
-画像のname属性を'image（保存先データテーブルのカラム名）'をセット
-buttonタグをクリックした時に、saveCanvas('preview')が発火するメソッドとして書きました。
-```javascript
-  //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
-    saveCanvas: function (canvas_id) {
-      //canvasタグのidをlet canvasに代入
-      let canvas = document.getElementById(canvas_id);
-      //canvasをJPEG変換し、そのBase64文字列をlet uriへセット
-      let uri = canvas.toDataURL("image/jpeg", 0.85);
-      //let canvasをimgタグに変換
-      canvas = document.createElement("img");
-      //imgタグのsrc属性にlet uriをセット
-      img.setAttribute =  uri;
-      //imgタグのネーム属性を'image'としてセット
-      img.setAttribute = ("name","image");
-      //buttonタグをクリックした時にイベントを発生させる
-      img.click();
-    },
-```
 現状では、データ送信後画像ファイルが空になっています。
 canvasタグで描画したデータを画像に変換してデータベースに保存するにはどうすればいいでしょうか？