回答編集履歴
2
追記修正
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
|
-
|
|
60
|
+
const img = document.createElement("img")
|
|
60
61
|
img.src = URL.createObjectURL(txtBlob);
|
|
61
62
|
document.body.appendChild(img);
|
|
62
63
|
})
|
1
追記
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)
|