ツイッターのツイートとかで画像をクリップボードから貼り付けられたけど
雑に(MDN内で検索で)やりかた調べた
雑すぎて最初に辿りついたのは
ClipboardAPIなるもので、これパーミッションが必要とかで、何か違うなーって…
ためしに実行してみたらパーミッション求められて、ツイッターとかでそんなの無かったと、コレ違うと
もうちょっと調べてみたら
普通にpasteイベントってのが存在
Element: paste イベント - Web API | MDN
これ試したら普通にいけた
pasteイベントで来るイベントオブジェクトかwindowオブジェクトか(ブラウザによる？)で
なんかclipboardDataというプロパティ(?)があるらしく
こいつの型がDataTransferというやつで
これのtypesプロパティでMIMEで画像ファイルとしてクリップボードにあって(任意の画像コピーがどういう形式かは知らんけど、OSやアプリによる？)
手前環境ではimage/pngで入ってて
filesのプロパティからFileオブジェクトとして取得できて
FileオブジェクトならURL.createObjectURL()メソッドでimgタグに表示できるな、と
んで、試したら
うまくいった
おわり
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<textarea></textarea>
<output></output>
<img width="100" height="100" style="border: 5px dotted red;" src="./img/dog.jpg">
<script>
function output(s) {
const o = document.querySelector('body > output');
o.textContent = o.textContent + '[[' + s.toString() + ']]';
}
let buf = [];
document.querySelector('body > textarea')
.addEventListener('paste', event => {
for (const x of buf) {
URL.revokeObjectURL(x);
document.querySelector('body > img').src = './img/dog.jpg';
}
buf = [];
if (event.clipboardData) {
output('event');
for (const x of event.clipboardData.types) {
output(x);
}
for (const x of event.clipboardData.files) {
output(x.type);
if (x.type === 'image/png') {
const u = URL.createObjectURL(x);
buf.push(u);
document.querySelector('body > img').src = u;
}
}
} else if (window.clipboardData) {
output('window');
for (const x of window.clipboardData.types) {
output(x);
}
}
});
</script>
</body>
</html>
続きを読む
