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

回答編集履歴

2

追記修正

2021/01/15 05:23

投稿

umau
umau

スコア831

answer CHANGED
@@ -15,8 +15,10 @@
15
15
  もし目的が「画像ファイル」であるなら、それを取り出す方法があるのかどうかは、すみませんが分からないです。itemに入ってこないという事は、何か制限があって不可能という可能性もある気がします。
16
16
 
17
17
 
18
- キャプチャ画像そのものであるなら、itemsが0になる事はないはず。
18
+ ~~キャプチャ画像そのものであるなら、itemsが0になる事はないはず。~~
19
+ (追記参照)
19
20
 
21
+
20
22
  参考にされている記事では、
21
23
  ```javascript
22
24
  // 画像の場合
@@ -41,8 +43,8 @@
41
43
  非同期のClipboardAPIを使用されていて、Promiseの実行時にEventListner内のclipboadが持ってるDataTransferの中身が消えてしまっているのがエラーの原因ぽいです。
42
44
 
43
45
  非同期APIを使用するなら、その後の読み込みも全部、非同期でやらないと駄目みたいです。
46
+ (EventListner実行時に渡される e.clipboardData.items の中身は、Promiseのthen によってコールバックが実行されるタイミングにおいては残っていない。)
44
47
 
45
-
46
48
  ```javascript
47
49
  document.addEventListener('paste', async e => {
48
50
  if (!e.clipboardData
@@ -54,9 +56,8 @@
54
56
 
55
57
  const items = await navigator.clipboard.read();
56
58
  const txtBlob = await items[0].getType("image/png");
57
- var fr = new FileReader();
58
59
 
59
- var img = document.createElement("img")
60
+ const img = document.createElement("img")
60
61
  img.src = URL.createObjectURL(txtBlob);
61
62
  document.body.appendChild(img);
62
63
  })

1

追記

2021/01/15 05:23

投稿

umau
umau

スコア831

answer CHANGED
@@ -32,4 +32,34 @@
32
32
  }
33
33
 
34
34
  ```
35
- という処理が入っていますよね。この分岐を使えば、画像とそれ以外を切り分けて作る事ができるんじゃないでしょうか。
35
+ という処理が入っていますよね。この分岐を使えば、画像とそれ以外を切り分けて作る事ができるんじゃないでしょうか。
36
+
37
+
38
+
39
+ (追記)
40
+
41
+ 非同期のClipboardAPIを使用されていて、Promiseの実行時にEventListner内のclipboadが持ってるDataTransferの中身が消えてしまっているのがエラーの原因ぽいです。
42
+
43
+ 非同期APIを使用するなら、その後の読み込みも全部、非同期でやらないと駄目みたいです。
44
+
45
+
46
+ ```javascript
47
+ document.addEventListener('paste', async e => {
48
+ if (!e.clipboardData
49
+ || !e.clipboardData.types
50
+ || (e.clipboardData.types.length != 1)
51
+ || (e.clipboardData.types[0] != "Files")) {
52
+ return true;
53
+ }
54
+
55
+ const items = await navigator.clipboard.read();
56
+ const txtBlob = await items[0].getType("image/png");
57
+ var fr = new FileReader();
58
+
59
+ var img = document.createElement("img")
60
+ img.src = URL.createObjectURL(txtBlob);
61
+ document.body.appendChild(img);
62
+ })
63
+ ```
64
+
65
+ (参考)[W3C - ClipboardAPI](https://www.w3.org/TR/clipboard-apis/#dom-clipboard-read)