js 实现截图粘贴进 input 实现图片上传

需求：

• 有个地方需要上传图片，但是图片大多数需要截图，但是图片截图下来之后要先保存到桌面再进行上传太麻烦，需要将截好的图直接上传，略过保存都桌面

过程：

查看截图后的数据是怎么处理的，google 发现截图后的数据都是存在剪贴板里的 event.clipboardData : window.clipboardData

将剪贴板里的图片信息拿出来

let clipboardData = event.clipboardData ? event.clipboardData : window.clipboardData;

        if( clipboardData ){
            let items = clipboardData.items;
            if( !items ){
                return null;
            }
            let item = items[0];
        }

  判定剪贴板里的数据是什么类型，如果不是file 就不做处理 getAsFile 就是将取到的item 转化成file 文件，这个正常的input type file 的获取结果是一样的

let types = clipboardData.types || [];
for(let i = 0; i < types.length; i++ ){
   if( types[i] === 'Files' ){
       item = items[i];
       break;
   }
}
// 判断是否为图片数据

if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
// 读取该图片
    if (isShow) {
       this.imgReader(item, callback);
    } else {
        return item.getAsFile();
    }
}

 将剪贴板里的图片渲染出来

imgReader(item, callback) {
        let file = item.getAsFile(),
            reader = new FileReader();
        // 读取文件后将其返回到callback
        reader.onload = function( e ){
            let base64 = e.target.result;
            callback(base64)
        };
        // 读取文件
        reader.readAsDataURL( file );
    }

在组件挂载时，添加粘贴的监听任务

document.addEventListener('paste', (event) => {
            console.info('paste');
            this.handlePaste(event);
        })

监听到粘贴事件，获取到上面的file 文件就可以上传到想要的地方了，或者直接做渲染

主要文件的代码块

getClipboardData(event, isShow = false, callback = () => {}) {
        let clipboardData = event.clipboardData ? event.clipboardData : window.clipboardData;

        if( clipboardData ){
            let items = clipboardData.items;
            if( !items ){
                return null;
            }
            let item = items[0];
            // 保存在剪贴板中的数据类型
            let types = clipboardData.types || [];
            for(let i = 0; i < types.length; i++ ){
                if( types[i] === 'Files' ){
                    item = items[i];
                    break;
                }
            }
            // 判断是否为图片数据
            if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
                // 读取该图片
                if (isShow) {
                    this.imgReader(item, callback);
                } else {
                    return item.getAsFile();
                }
            }
        }
        return null;
    },
    imgReader(item, callback) {
        let file = item.getAsFile(),
            reader = new FileReader();
        // 读取文件后将其返回到callback
        reader.onload = function( e ){
            let base64 = e.target.result;
            callback(base64)
        };
        // 读取文件
        reader.readAsDataURL( file );
    },

结论：

• 截图的信息都存在剪贴板里
• 剪贴板里的东西可以通过event.clipboardData : window.clipboardData  下的  items 获取
• clipboard.types  可以获取剪贴板里的数据类型
• FileReader 可以通过readAsDataURL 导入到FileReader，并通过 onload 获取到对应文件的base64

标签：截图,items,js,item,let,file,clipboardData,input,event
来源： https://blog.csdn.net/weitao_11/article/details/114633619