概要

javascript の Clipboard API を使ったクリップボードへの書き込みや読み込みの方法を紹介します。

クリップボードへの書き込み

例として、次のようなHTML要素があるとします。

<input id="input" type="text">
<button id="copy">Copy</button>

Copy ボタンを押して input タグの内容をコピーするには writeText 関数を使います。

function copy() {
  const copyText = document.querySelector('#input')
  if (copyText.value) {
   navigator.clipboard.writeText(copyText.value)
  }
}

const button = document.querySelector('#copy')
button.addEventListener('click', copy)

画像をコピーする

こんどは img タグの画像をクリップボードへ書き込んでみます。

次のように、画像とボタンからなるHTMLを用意します。

<img src="./example.jpg">
<button id="copy">Copy</button>

画像を書き込む場合は、画像からバイナリデータを取得し、ClipboardItem を作ります。
後はテキストの書き込みと同じく write を使用します。

async function copy() {
  const img = document.querySelector('img')

  const blob = await fetch(img.src).then(res => res.blob())
  const data = [new window.ClipboardItem({ [blob.type]: blob })]
  navigator.clipboard.write(data)
}

button.addEventListener('click', copy)

クリップボードからの読み込み

クリップボードの内容を表示する textarea と それを実行する Paste ボタンを用意します。

<textarea id="output"></textarea>
<button id="paste">Paste</button>

Paste ボタンを押してクリップボードの内容を textarea に表示するには readText 関数を使います。

async function paste() {
  const text = await navigator.clipboard.readText()

  const pasteTextarea = document.querySelector('#output')
  pasteTextarea.textContent = text
}

button.addEventListener('click', paste)

画像の読み込み

クリップボードの画像を読み込んで img タグに表示してみます。
画像のコピーと同じようなHTMLを用意します。

<img src="./example.jpg">
<button id="paste">Paste</button>

まず、read 関数を使ってクリップボードからファイルを読み込みます。
そして getType でBlobオブジェクトを取得し、そのオブジェクトURLを img タグに書き込みます。

async function paste() {
  const data = await navigator.clipboard.read()
  if (!data.length) {
    return
  }
  const file = data[0]
  for (const type of file.types) {
    if (type.startsWith('image/')) {
      const blob = await file.getType(type)
      const src = URL.createObjectURL(blob)
      const img = document.querySelector('img')
      img.src = src
      return
    }
  }
}

button.addEventListener('click', paste)