clipboard api 色々チェック用スクリプト

clipboard.js

function createCanvas() {
  const canvas=document.createElement('canvas')
  canvas.width=canvas.height=100
  const ctx = canvas.getContext('2d')
  ctx.textAlign='center'
  ctx.textBaseline='center'
  for(let i=0;i<100;i++){ctx.fillText(String.fromCharCode(16384*Math.random()),100*Math.random(),100*Math.random())}
  return canvas
}

document.oncopy=e=>{
  console.log('copy')
  e.preventDefault()
  const canvas = createCanvas()
  e.clipboardData.setData('text/plain', Math.random().toString())
  e.clipboardData.setData('application/hoge', Math.random().toString())
  e.clipboardData.setData('image/png', atob(canvas.toDataURL().substr(22)))
  // e.clipboardData.setData('text/html', `<img src="${canvas.toDataURL()}"></img>hello`)
  window.cd = e.clipboardData
}
document.body.onclick = () => {
  createCanvas().toBlob(blob => {
    navigator.clipboard.write(
      [
        new ClipboardItem({
          [blob.type]: blob,
          'text/html': new Blob(['a', 'b', 'c'], {type: 'text/html'})
        })
      ])
  })
}

document.onpaste=e=>{
  console.log(
    e.clipboardData.types,
    e.clipboardData.getData('text/plain'),
    e.clipboardData.getData('application/hoge'),
    e.clipboardData.getData('text/html'),
    e.clipboardData.getData('image/png'),
    e.clipboardData.getData('Files')
  )
  const f = e.clipboardData.files[0]
  console.log(e.clipboardData.files.length, f)
}