从剪贴板粘贴图像.md

从剪贴板粘贴图像

通过 paste 事件，获取剪贴板的图像数据：

// 处理 paste 事件
document.addEventListener('paste', (e) => {
  // 获取剪贴板的数据
  const clipboardItems = e.clipboardData.items
  const items = [].slice
    .call(clipboardItems)
    .filter((item) => item.type.indexOf('image') !== -1) // 仅过滤图像项

  if (!items.length) return

  const item = items[0]
  // 获取 blob 图像
  const blob = item.getAsFile()
})

从图像块中，我们可以预览它。

这里我们有一个用于预览的 img 元素。

<img id="preview" />

获取引用，并设置源：

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

或者通过 AJAX 请求将其上传到服务器：

// 创建一个新的 FormData
const formData = new FormData()
formData.append('image', blob, 'filename')

// 创建新的 AJAX 请求
const req = new XMLHttpRequest()
req.open('POST', '/path/to/back-end', true)

// 处理事件
req.onload = function () {
  if (req.status >= 200 && req.status < 400) {
    const res = req.responseText
    // 对响应做点什么
    // ...
  }
}

// 发送它
req.send(formData)

查看效果