回答編集履歴
3
位置の修正
test
CHANGED
|
@@ -50,11 +50,11 @@
|
|
|
50
50
|
|
|
51
51
|
let file = this.$refs.selectimage.files //ファイル情報の取得
|
|
52
52
|
|
|
53
|
+
const canvas = this.$refs.preview; //canvasタグ
|
|
54
|
+
|
|
53
55
|
const fileReader = new FileReader();
|
|
54
56
|
|
|
55
57
|
fileReader.onload = function () {
|
|
56
|
-
|
|
57
|
-
const canvas = this.$refs.preview; //canvasタグ
|
|
58
58
|
|
|
59
59
|
const ctx = canvas.getContext("2d");
|
|
60
60
|
|
2
idも
test
CHANGED
|
@@ -2,9 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
**this.$refs**を使うことで、毎回選択したファイル情報を取得してくれます（document.querySelectorと同じ）
|
|
5
|
+
**this.$refs**を使うことで、毎回選択したファイル情報を取得してくれます（document.querySelectorやgetElementByIdと同じ役割を果たしてくれるので便利）
|
|
6
6
|
|
|
7
7
|
|
|
8
|
+
|
|
9
|
+
方法は取得したいタグにrefプロパティを設定するだけです。あとは
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
**this.$refs.設定したプロパティ名**
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
で、任意のDOM内の情報取得し放題です。
|
|
8
18
|
|
|
9
19
|
|
|
10
20
|
|
|
@@ -14,7 +24,7 @@
|
|
|
14
24
|
|
|
15
25
|
<div>
|
|
16
26
|
|
|
17
|
-
<canvas
|
|
27
|
+
<canvas ref="preview"></canvas>
|
|
18
28
|
|
|
19
29
|
<input type="file" name="image" accept="image/*" ref="selectimage" @change="previewImage" />
|
|
20
30
|
|
|
@@ -44,7 +54,7 @@
|
|
|
44
54
|
|
|
45
55
|
fileReader.onload = function () {
|
|
46
56
|
|
|
47
|
-
const canvas =
|
|
57
|
+
const canvas = this.$refs.preview; //canvasタグ
|
|
48
58
|
|
|
49
59
|
const ctx = canvas.getContext("2d");
|
|
50
60
|
|
1
関数が抜けていた
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
これで問題ないのでは？そもそも、これテンプレートの時点でルール違反（単一ブロックで括られていない）で、エラーとなるはずですが
|
|
1
|
+
これで問題ないのでは？そもそも、これテンプレートの時点でルール違反（単一ブロックで括られていない）で、エラーとなるはずですが。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -36,6 +36,8 @@
|
|
|
36
36
|
|
|
37
37
|
methods:{
|
|
38
38
|
|
|
39
|
+
previewImage: function () {
|
|
40
|
+
|
|
39
41
|
let file = this.$refs.selectimage.files //ファイル情報の取得
|
|
40
42
|
|
|
41
43
|
const fileReader = new FileReader();
|
|
@@ -64,6 +66,8 @@
|
|
|
64
66
|
|
|
65
67
|
fileReader.readAsDataURL(file[0]);
|
|
66
68
|
|
|
69
|
+
}
|
|
70
|
+
|
|
67
71
|
},
|
|
68
72
|
|
|
69
73
|
|