teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

codeにしました

2021/01/25 20:53

投稿

taroj
taroj

スコア1

title CHANGED
File without changes
body CHANGED
@@ -11,6 +11,66 @@
11
11
 
12
12
  ### 該当のソースコード
13
13
 
14
+ ```
15
+ <form class="container">
16
+ <h2>Input</h2>
17
+ <input type="text" id="image-url" value="https://ja.wikipedia.org/static/images/project-logos/jawiki.png">
18
+ <button type="button" id="load">load</button>
19
+ <h2>How to use</h2>
20
+ <ol>
21
+ <li>画像URLを入力し、loadボタンで画像を読み込む(※ CORSが許可されている画像のみ)</li>
22
+ <li>zoom-in, zoom-out, ドラッグ&ドロップで画像を編集する</li>
23
+ <li>exportボタンで画像を出力する</li>
24
+ </ol>
25
+ </form>
26
+
27
+ <div class="container">
28
+ <h2>Editor</h2>
29
+ <div class="form">
30
+ <button type="button" id="export">export</button>
31
+ </div>
32
+ <div id="edit-image"></div>
33
+ </div>
34
+
35
+ <div class="container">
36
+ <h2>Output</h2>
37
+ <div id="output-image"></div>
38
+ </div>
39
+
40
+ <div class="upload"><input type="file" name="file" id="file"></div>
41
+ <div id="result"></div>
42
+
43
+ <script type="text/javascript">
44
+
45
+ var file = document.getElementById('file');
46
+ var result = document.getElementById('result');
47
+
48
+ function loadLocalImage(e) {
49
+ // ファイル情報を取得
50
+ var fileData = e.target.files[0];
51
+
52
+ // 画像ファイル以外は処理を止める
53
+ if(!fileData.type.match('image.*')) {
54
+ alert('画像を選択してください');
55
+ return;
56
+ }
57
+
58
+ // FileReaderオブジェクトを使ってファイル読み込み
59
+ var reader = new FileReader();
60
+ // ファイル読み込みに成功したときの処理
61
+ reader.onload = function() {
62
+ // ブラウザ上に画像を表示する
63
+ var img = document.createElement('img');
64
+ img.src = reader.result;
65
+ result.appendChild(img);
66
+ }
67
+ // ファイル読み込みを実行
68
+ reader.readAsDataURL(fileData);
69
+ }
70
+
71
+ // ファイルが指定された時にloadLocalImage()を実行
72
+ file.addEventListener('change', loadLocalImage, false);
73
+
14
74
  class ImageEditor {
15
75
  /**
16
76
  * Canvas操作
@@ -183,7 +243,8 @@
183
243
  }
184
244
  }
185
245
 
186
- function createImageEditor() {
246
+ function createImageEditor() {
247
+
187
248
  const input = document.getElementById('image-url');
188
249
  const editImage = document.getElementById('edit-image');
189
250
 
@@ -206,12 +267,13 @@
206
267
 
207
268
  }
208
269
 
209
- function main() {
270
+ // ファイルが指定された時にloadLocalImage()を実行
210
- document.getElementById('load').addEventListener('click', createImageEditor);
271
+ file.addEventListener('change', createImageEditor, false);
211
- }
212
272
 
213
- main();
273
+ </script>
214
274
 
275
+ ```
276
+
215
277
  ### 試したこと
216
278
 
217
279
  input.valueの値をFileAPIの値に変更することが出来ません。