WebブラウザでJavaScriptを使いクリップボード経由で画像を貼り付けることは出来ますか？

コンピュータ

2025.10.12

画像を Ctrl+V で貼り付けてください。

※このページは実際動作します。画像はサーバーにアップロードはされません。

ソースコード

・HTML

<div id="drop" contenteditable="true">画像を Ctrl+V で貼り付けてください。</div>
<img id="preview">

・JavaScrpt

document.addEventListener('paste', e => {
  for (const item of e.clipboardData.items) {
    if (item.type.startsWith('image/')) {
      const file = item.getAsFile();              // 画像の File
      const url  = URL.createObjectURL(file);     // プレビュー用
      preview.src = url;
    }
  }
});