js实现Ctrl + V 粘贴图片

背景

前两天做了个功能，大概需求就是截图粘贴到浏览器，然后调用后台图片识别接口，提取图片中的文字，整体流程如下图所示：

思路

简单说一下思路：

1. 监听浏览器paste事件
2. 图片转base64（涉及DataTransferItemList，DataTransferItem，FileReader，URL.createObjectURL）
3. 与后台交互FormData

实现

纸上得来终觉浅，绝知此事要躬行。

好了，废话不多说，直接上代码：

// 监听paste事件
document.addEventListener('paste', function (e) {
    const dataTransferItemList = e.clipboardData.items;
    // 过滤非图片类型
    const items = [].slice.call(dataTransferItemList).filter(function (item) {
        return item.type.indexOf('image') !== -1;
    });
    if (items.length === 0) {
        return;
    }
    const dataTransferItem = items[0];
    const blob = dataTransferItem.getAsFile();
    // 获取base64
    const fileReader = new FileReader();
    fileReader.addEventListener('load', function (e) {
        let base64 = e.target.result;
    });
    fileReader.readAsDataURL(blob);
    // 如果觉得base64太长，也可以生成本地临时链接
    let url = URL.createObjectURL(blob);
    // 上传图片至后台
    upload(blob);
});

// 上传
function upload(file) {
    // formData
    const formData = new FormData();
    formData.append('file', blob, 'filename');
    // 发送请求
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'backend/path', true);
    xhr.addEventListener('load', function () {
        if (xhr.status === 200) {
            const res = xhr.responseText;
            // todo
            // ...
        }
    });
    xhr.send(formData);
}
复制代码