从剪贴板粘贴图像

// 处理 paste 事件
document.addEventListener('paste', function (e) {
    // 获取剪贴板的数据
    const clipboardItems = e.clipboardData.items
    const items = [].slice.call(clipboardItems).filter(function (item) {
        // 仅过滤图像项
        return item.type.indexOf('image') !== -1
    })
    if (items.length === 0) 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)

查看效果