回答編集履歴
3
位置の修正
answer
CHANGED
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
methods:{
|
|
25
25
|
previewImage: function () {
|
|
26
26
|
let file = this.$refs.selectimage.files //ファイル情報の取得
|
|
27
|
+
const canvas = this.$refs.preview; //canvasタグ
|
|
27
28
|
const fileReader = new FileReader();
|
|
28
29
|
fileReader.onload = function () {
|
|
29
|
-
const canvas = this.$refs.preview; //canvasタグ
|
|
30
30
|
const ctx = canvas.getContext("2d");
|
|
31
31
|
const image = new Image();
|
|
32
32
|
image.src = fileReader.result;
|
2
idも
answer
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
これで問題ないのでは？そもそも、これテンプレートの時点でルール違反（単一ブロックで括られていない）で、エラーとなるはずですが。
|
|
2
2
|
|
|
3
|
-
**this.$refs**を使うことで、毎回選択したファイル情報を取得してくれます（document.querySelectorと同じ）
|
|
3
|
+
**this.$refs**を使うことで、毎回選択したファイル情報を取得してくれます（document.querySelectorやgetElementByIdと同じ役割を果たしてくれるので便利）
|
|
4
4
|
|
|
5
|
+
方法は取得したいタグにrefプロパティを設定するだけです。あとは
|
|
5
6
|
|
|
7
|
+
**this.$refs.設定したプロパティ名**
|
|
8
|
+
|
|
9
|
+
で、任意のDOM内の情報取得し放題です。
|
|
10
|
+
|
|
6
11
|
```vue
|
|
7
12
|
<template>
|
|
8
13
|
<div>
|
|
9
|
-
<canvas
|
|
14
|
+
<canvas ref="preview"></canvas>
|
|
10
15
|
<input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage" />
|
|
11
16
|
<p>
|
|
12
17
|
<input type="text" id="canvas_text" value="我輩は犬である" />
|
|
@@ -21,7 +26,7 @@
|
|
|
21
26
|
let file = this.$refs.selectimage.files //ファイル情報の取得
|
|
22
27
|
const fileReader = new FileReader();
|
|
23
28
|
fileReader.onload = function () {
|
|
24
|
-
const canvas =
|
|
29
|
+
const canvas = this.$refs.preview; //canvasタグ
|
|
25
30
|
const ctx = canvas.getContext("2d");
|
|
26
31
|
const image = new Image();
|
|
27
32
|
image.src = fileReader.result;
|
1
関数が抜けていた
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
これで問題ないのでは？そもそも、これテンプレートの時点でルール違反（単一ブロックで括られていない）で、エラーとなるはずですが
|
|
1
|
+
これで問題ないのでは？そもそも、これテンプレートの時点でルール違反（単一ブロックで括られていない）で、エラーとなるはずですが。
|
|
2
2
|
|
|
3
3
|
**this.$refs**を使うことで、毎回選択したファイル情報を取得してくれます（document.querySelectorと同じ）
|
|
4
4
|
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
/*中略*/
|
|
19
19
|
methods:{
|
|
20
|
+
previewImage: function () {
|
|
20
21
|
let file = this.$refs.selectimage.files //ファイル情報の取得
|
|
21
22
|
const fileReader = new FileReader();
|
|
22
23
|
fileReader.onload = function () {
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
};
|
|
32
33
|
};
|
|
33
34
|
fileReader.readAsDataURL(file[0]);
|
|
35
|
+
}
|
|
34
36
|
},
|
|
35
37
|
|
|
36
38
|
```
|