从剪贴板粘贴图像

监听paste事件, 从剪贴板获取图像数据, 转换为 blob 类型.

// Handle the `paste` event
document.addEventListener('paste', function (evt) {
  // Get the data of clipboard
  const clipboardItems = evt.clipboardData.items
  const items = [].slice.call(clipboardItems).filter(function (item) {
    // Filter the image items only
    return item.type.indexOf('image') !== -1
  })
  if (items.length === 0) {
    return
  }

  const item = items[0]
  // Get the blob of image
  const blob = item.getAsFile()
})

通过URL.createObjectURL, 我们可以创建一个指向 blob 的 URL, 然后将其赋值给img元素的src属性, 从而显示图像.

// Assume that we have an `img` element
// <img id="preview" />

const imageEle = document.getElementById('preview')
imageEle.src = URL.createObjectURL(blob)

从剪贴板粘贴图像 ​

示例 ​

从剪贴板粘贴图像

示例