質問編集履歴

4

テキスト修正

2021/12/08 06:44

投稿

Fukusuke0604
Fukusuke0604

スコア555

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

3

テキスト修正

2021/12/08 06:44

投稿

Fukusuke0604
Fukusuke0604

スコア555

test CHANGED
@@ -1 +1 @@
1
- 自作のjavascriptメソッドが実行されない。canvasタグでプレビュー。描画したデータを、画像に変換してデータベースに保存する
1
+ 自作のjavascriptメソッドのエラー解決出来ない。
test CHANGED
@@ -30,13 +30,183 @@
30
30
 
31
31
 
32
32
 
33
+ //canvasImgにname属性、"image"をセット
34
+
35
+ canvasImg.setAttribute = ("name","image");
36
+
37
+
38
+
39
+ //src属性に変数urlを代入し、canvasImgにセット
40
+
41
+ canvasImg.setAttribute = ("src",url);
42
+
43
+
44
+
45
+ //div id="image_area" を取得して、imgAreaに代入
46
+
47
+ let imgArea = document.getElementById(image_area);
48
+
49
+
50
+
51
+ //div id=imgArea 内(let imgArea)に変数canvasImg(imgタグ)を追加
52
+
53
+ //クリックされたらsaveCanvasメソッドを実行
54
+
55
+ imgArea.appendChild(canvasImg).click();
56
+
57
+ },
58
+
59
+ ```
60
+
61
+
62
+
63
+ canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+ Vueコンポーネント全体は以下のように書いています。
72
+
73
+ ```javascript
74
+
75
+ <template>
76
+
77
+ <div>
78
+
79
+ <div id="image_area">
80
+
81
+ <canvas ref="preview" id="preview"></canvas>
82
+
83
+ <input type="file" accept="image/*" ref="selectimage" @change="previewImage"/>
84
+
85
+ </div>
86
+
87
+ <p>
88
+
89
+ <input type="text" id="canvas_text" value="我輩は犬である" />
90
+
91
+ <button type="button" @click="drawText('preview', 'canvas_text'),saveCanvas('preview')">
92
+
93
+ 文字を描く
94
+
95
+ </button>
96
+
97
+ </p>
98
+
99
+ </div>
100
+
101
+ </template>
102
+
103
+
104
+
105
+ <script>
106
+
107
+ export default {
108
+
109
+ methods: {
110
+
111
+ // canvasの画像をinput type="file"にプレビュー
112
+
113
+ previewImage: function () {
114
+
115
+ let file = this.$refs.selectimage.files; //ファイル情報の取得
116
+
117
+ const canvas = this.$refs.preview; //canvasタグ
118
+
119
+ const fileReader = new FileReader();
120
+
121
+ fileReader.onload = function () {
122
+
123
+ const ctx = canvas.getContext("2d");
124
+
125
+ const image = new Image();
126
+
127
+ image.src = fileReader.result;
128
+
129
+ image.onload = function () {
130
+
131
+ canvas.width = image.width;
132
+
133
+ canvas.height = image.height;
134
+
135
+ ctx.drawImage(image, 0, 0);
136
+
137
+ };
138
+
139
+ };
140
+
141
+ fileReader.readAsDataURL(file[0]);
142
+
143
+ },
144
+
145
+
146
+
147
+ //キャンバスに文字を描く
148
+
149
+ drawText: function (canvas_id, text_id) {
150
+
151
+ const canvas = document.getElementById(canvas_id);
152
+
153
+ const ctx = canvas.getContext("2d");
154
+
155
+ const text = document.getElementById(text_id);
156
+
157
+ //文字のスタイルを指定
158
+
159
+ ctx.font = "32px serif";
160
+
161
+ ctx.fillStyle = "#404040";
162
+
163
+ //文字の配置を指定(左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
164
+
165
+ ctx.textBaseline = "center";
166
+
167
+ ctx.textAlign = "center";
168
+
169
+ //座標を指定して文字を描く(座標は画像の中心に)
170
+
171
+ const x = canvas.width / 2;
172
+
173
+ const y = canvas.height / 2;
174
+
175
+ ctx.fillText(text.value, x, y);
176
+
177
+ },
178
+
179
+
180
+
181
+ //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
182
+
183
+ saveCanvas: function (canvas_id) {
184
+
185
+ //canvasタグのidをlet canvasに代入
186
+
187
+ let canvas = document.getElementById(canvas_id);
188
+
189
+
190
+
191
+ //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
192
+
193
+ let url = canvas.toDataURL("image/jpeg", 0.85);
194
+
195
+
196
+
197
+ // imgタグを作成し、canvasImgに代入
198
+
199
+ let canvasImg = document.createElement('img');
200
+
201
+
202
+
33
203
  //canvasImgにname属性、imageをcanvasImgにセット
34
204
 
35
205
  canvasImg.setAttribute = ("name","image");
36
206
 
37
207
 
38
208
 
39
- //src属性に変数urlを代入し、canvasImgにセット
209
+ //src属性に変数urlを代入し、canvasImgにセット
40
210
 
41
211
  canvasImg.setAttribute = ("src",url);
42
212
 
@@ -60,186 +230,16 @@
60
230
 
61
231
  },
62
232
 
233
+ },
234
+
235
+
236
+
237
+ };
238
+
239
+ </script>
240
+
63
241
  ```
64
242
 
65
- canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
66
-
67
-
68
-
69
-
70
-
71
- Vueコンポーネント全体は以下のように書いています。
72
-
73
- ```javascript
74
-
75
- <template>
76
-
77
- <div>
78
-
79
- <div id="image_area">
80
-
81
- <canvas ref="preview" id="preview"></canvas>
82
-
83
- <input type="file" accept="image/*" ref="selectimage" @change="previewImage"/>
84
-
85
- </div>
86
-
87
- <p>
88
-
89
- <input type="text" id="canvas_text" value="我輩は犬である" />
90
-
91
- <button type="button" @click="drawText('preview', 'canvas_text'),saveCanvas('preview')">
92
-
93
- 文字を描く
94
-
95
- </button>
96
-
97
- </p>
98
-
99
- </div>
100
-
101
- </template>
102
-
103
-
104
-
105
- <script>
106
-
107
- export default {
108
-
109
- methods: {
110
-
111
- // canvasの画像をinput type="file"にプレビュー
112
-
113
- previewImage: function () {
114
-
115
- let file = this.$refs.selectimage.files; //ファイル情報の取得
116
-
117
- const canvas = this.$refs.preview; //canvasタグ
118
-
119
- const fileReader = new FileReader();
120
-
121
- fileReader.onload = function () {
122
-
123
- const ctx = canvas.getContext("2d");
124
-
125
- const image = new Image();
126
-
127
- image.src = fileReader.result;
128
-
129
- image.onload = function () {
130
-
131
- canvas.width = image.width;
132
-
133
- canvas.height = image.height;
134
-
135
- ctx.drawImage(image, 0, 0);
136
-
137
- };
138
-
139
- };
140
-
141
- fileReader.readAsDataURL(file[0]);
142
-
143
- },
144
-
145
-
146
-
147
- //キャンバスに文字を描く
148
-
149
- drawText: function (canvas_id, text_id) {
150
-
151
- const canvas = document.getElementById(canvas_id);
152
-
153
- const ctx = canvas.getContext("2d");
154
-
155
- const text = document.getElementById(text_id);
156
-
157
- //文字のスタイルを指定
158
-
159
- ctx.font = "32px serif";
160
-
161
- ctx.fillStyle = "#404040";
162
-
163
- //文字の配置を指定(左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
164
-
165
- ctx.textBaseline = "center";
166
-
167
- ctx.textAlign = "center";
168
-
169
- //座標を指定して文字を描く(座標は画像の中心に)
170
-
171
- const x = canvas.width / 2;
172
-
173
- const y = canvas.height / 2;
174
-
175
- ctx.fillText(text.value, x, y);
176
-
177
- },
178
-
179
-
180
-
181
- //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
182
-
183
- saveCanvas: function (canvas_id) {
184
-
185
- //canvasタグのidをlet canvasに代入
186
-
187
- let canvas = document.getElementById(canvas_id);
188
-
189
-
190
-
191
- //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
192
-
193
- let url = canvas.toDataURL("image/jpeg", 0.85);
194
-
195
-
196
-
197
- // imgタグを作成し、canvasImgに代入
198
-
199
- let canvasImg = document.createElement('img');
200
-
201
-
202
-
203
- //canvasImgにname属性、imageをcanvasImgにセット
204
-
205
- canvasImg.setAttribute = ("name","image");
206
-
207
-
208
-
209
- //src属性に変数urlを代入し、canvasImgにセット
210
-
211
- canvasImg.setAttribute = ("src",url);
212
-
213
-
214
-
215
- //div id="image_area" を取得して、imgAreaに代入
216
-
217
- let imgArea = document.getElementById(image_area);
218
-
219
-
220
-
221
- //div id=imgArea内(let imgArea)に変数canvasImg(imgタグ)を追加
222
-
223
- canvasImg.appendChild(imgArea);
224
-
225
-
226
-
227
- //buttonタグをクリックした時にイベントを発生させる
228
-
229
- canvasImg.click();
230
-
231
- },
232
-
233
- },
234
-
235
-
236
-
237
- };
238
-
239
- </script>
240
-
241
- ```
242
-
243
243
 
244
244
 
245
245
  現状では、データ送信後画像ファイルが空になっています。

2

テキスト修正

2021/12/08 06:30

投稿

Fukusuke0604
Fukusuke0604

スコア555

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- //src属性にtoDataURL()が代入された変数urlをcanvasImgにセット
39
+ //src属性に変数urlを代入し、canvasImgにセット
40
40
 
41
41
  canvasImg.setAttribute = ("src",url);
42
42
 
@@ -206,7 +206,7 @@
206
206
 
207
207
 
208
208
 
209
- //src属性にtoDataURL()が代入された変数urlをcanvasImgにセット
209
+ //src属性に変数urlを代入し、canvasImgにセット
210
210
 
211
211
  canvasImg.setAttribute = ("src",url);
212
212
 

1

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

2021/12/07 14:17

投稿

Fukusuke0604
Fukusuke0604

スコア555

test CHANGED
@@ -1 +1 @@
1
- canvasタグで描画したデータを画像に変換してデータベースに保存されない。
1
+ 自作のjavascriptメソッドが実行されない。canvasタグでプレビュー。描画したデータを画像に変換してデータベースに保存する
test CHANGED
@@ -2,16 +2,88 @@
2
2
 
3
3
 
4
4
 
5
+ エラーが出ているのは、以下のメソッドです。
6
+
7
+
8
+
5
9
  ```javascript
6
10
 
11
+ //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
12
+
13
+ saveCanvas: function (canvas_id) {
14
+
15
+ //canvasタグのidをlet canvasに代入
16
+
17
+ let canvas = document.getElementById(canvas_id);
18
+
19
+
20
+
21
+ //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
22
+
23
+ let url = canvas.toDataURL("image/jpeg", 0.85);
24
+
25
+
26
+
27
+ // imgタグを作成し、canvasImgに代入
28
+
29
+ let canvasImg = document.createElement('img');
30
+
31
+
32
+
33
+ //canvasImgにname属性、imageをcanvasImgにセット
34
+
35
+ canvasImg.setAttribute = ("name","image");
36
+
37
+
38
+
39
+ //src属性にtoDataURL()が代入された変数urlをcanvasImgにセット
40
+
41
+ canvasImg.setAttribute = ("src",url);
42
+
43
+
44
+
45
+ //div id="image_area" を取得して、imgAreaに代入
46
+
47
+ let imgArea = document.getElementById(image_area);
48
+
49
+
50
+
51
+ //div id=imgArea内(let imgArea)に変数canvasImg(imgタグ)を追加
52
+
53
+ canvasImg.appendChild(imgArea);
54
+
55
+
56
+
57
+ //buttonタグをクリックした時にイベントを発生させる
58
+
59
+ canvasImg.click();
60
+
61
+ },
62
+
63
+ ```
64
+
65
+ canvasImg.appendChild(imgArea); の箇所で、「Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.」というエラーになります。。。。
66
+
67
+
68
+
69
+
70
+
71
+ Vueコンポーネント全体は以下のように書いています。
72
+
73
+ ```javascript
74
+
7
75
  <template>
8
76
 
9
77
  <div>
10
78
 
79
+ <div id="image_area">
80
+
11
81
  <canvas ref="preview" id="preview"></canvas>
12
82
 
13
83
  <input type="file" accept="image/*" ref="selectimage" @change="previewImage"/>
14
84
 
85
+ </div>
86
+
15
87
  <p>
16
88
 
17
89
  <input type="text" id="canvas_text" value="我輩は犬である" />
@@ -28,6 +100,8 @@
28
100
 
29
101
  </template>
30
102
 
103
+
104
+
31
105
  <script>
32
106
 
33
107
  export default {
@@ -114,38 +188,52 @@
114
188
 
115
189
 
116
190
 
117
- //canvasをJPEG変換し、そのBase64文字列をlet uriへセット
191
+ //canvasをJPEG変換し、そのBase64文字列をlet urlへセット
118
-
192
+
119
- let uri = canvas.toDataURL("image/jpeg", 0.85);
193
+ let url = canvas.toDataURL("image/jpeg", 0.85);
120
-
121
-
122
-
194
+
195
+
196
+
123
- //let canvasをimgタグ変換
197
+ // imgタグを作成し、canvasImgに代入
124
-
198
+
125
- canvas = document.createElement("img");
199
+ let canvasImg = document.createElement('img');
126
-
127
-
128
-
129
- //imgタグのsrc属性にlet uriをセット
200
+
130
-
131
- img.setAttribute = uri;
201
+
132
-
133
-
134
-
202
+
135
- //imgタグのネーム属性を'image'としてセット
203
+ //canvasImgにname属性imageをcanvasImgにセット
136
-
204
+
137
- img.setAttribute = ("name","image");
205
+ canvasImg.setAttribute = ("name","image");
206
+
207
+
208
+
209
+ //src属性にtoDataURL()が代入された変数urlをcanvasImgにセット
210
+
211
+ canvasImg.setAttribute = ("src",url);
212
+
213
+
214
+
215
+ //div id="image_area" を取得して、imgAreaに代入
216
+
217
+ let imgArea = document.getElementById(image_area);
218
+
219
+
220
+
221
+ //div id=imgArea内(let imgArea)に変数canvasImg(imgタグ)を追加
222
+
223
+ canvasImg.appendChild(imgArea);
138
224
 
139
225
 
140
226
 
141
227
  //buttonタグをクリックした時にイベントを発生させる
142
228
 
143
- img.click();
229
+ canvasImg.click();
144
230
 
145
231
  },
146
232
 
147
233
  },
148
234
 
235
+
236
+
149
237
  };
150
238
 
151
239
  </script>
@@ -154,72 +242,6 @@
154
242
 
155
243
 
156
244
 
157
-
158
-
159
- 今回動作していない箇所は下記です。
160
-
161
- toDataURL()でキャンバス内のデータをdata:形式に変換
162
-
163
- canvasタグをimgタグに変換
164
-
165
- src属性にtoDataURLで取得したデータをセット
166
-
167
- 画像のname属性を'image(保存先データテーブルのカラム名)'をセット
168
-
169
- buttonタグをクリックした時に、saveCanvas('preview')が発火するメソッドとして書きました。
170
-
171
-
172
-
173
- ```javascript
174
-
175
- //canvasタグをimgタグに変換、name属性を'image'を追加するメソッド
176
-
177
- saveCanvas: function (canvas_id) {
178
-
179
- //canvasタグのidをlet canvasに代入
180
-
181
- let canvas = document.getElementById(canvas_id);
182
-
183
-
184
-
185
- //canvasをJPEG変換し、そのBase64文字列をlet uriへセット
186
-
187
- let uri = canvas.toDataURL("image/jpeg", 0.85);
188
-
189
-
190
-
191
- //let canvasをimgタグに変換
192
-
193
- canvas = document.createElement("img");
194
-
195
-
196
-
197
- //imgタグのsrc属性にlet uriをセット
198
-
199
- img.setAttribute = uri;
200
-
201
-
202
-
203
- //imgタグのネーム属性を'image'としてセット
204
-
205
- img.setAttribute = ("name","image");
206
-
207
-
208
-
209
- //buttonタグをクリックした時にイベントを発生させる
210
-
211
- img.click();
212
-
213
- },
214
-
215
- ```
216
-
217
-
218
-
219
-
220
-
221
245
  現状では、データ送信後画像ファイルが空になっています。
222
246
 
223
-
224
-
225
247
  canvasタグで描画したデータを画像に変換してデータベースに保存するにはどうすればいいでしょうか?