303 字
1 分钟
JS粘贴事件获得图片信息
知识点
- paste事件：粘贴触发该事件，该事件的事件对象存在一个实验性属性clipboardData，该属性可以获得一个DataTransfer对象
DataTransfer对象：本用作保存拖动并放下过程中的数据，在这里也可以获取到剪贴板的数据，通过DataTransfer.items获得一个包含所有存放数据的DataTransferItemList对象DataTransferItemList对象：为一组保存被拖动项(在这里是复制项)的DataTransferItem对象列表DataTransferItem对象：描述了一个拖拽项（在这里为复制项），这里用到了他的getAsFile方法，此方法返回一个关联的File对象，当拖拽项不是一个文件时返回nullFile对象：File对象是特殊类型的Blob对象(谨记)
实现
在目标元素上注册paste事件，方法名为pasteImg
ele.onpaste = pasteImg在pasteImg方法内实现获取粘贴项File对象：
function pasteImg(e) { // 获取粘贴项列表 const dataTransferItemList = e.clipboardData.items // 过滤非图片类型 // 由于dataTransferItemList不存在slice方法，通过call的方式使其使用数组的slice方法来做到浅拷贝 const items = Array.prototype.slice.call(dataTransferItemList).filter(item => { return item.type.indexOf('image') !== -1; }) // 无数据则不再继续执行方法 if (items.length === 0) { return } // 获取第一个复制项数据（即最近一次复制） const dataTransferItem = items[0] // 获取复制项数据的File对象 const file = dataTransferItem.getAsFile()}其他操作
File对象拿到了，接下来可以做一些其他操作了，例如
重命名生成新的File对象
const newFile = new File(file, '屏幕截图.png', {type: 'image/png'})通过createObjectURL获得一个本地临时链接用于显示图片，格式：blob:https://xxx.xx/xxx-xxx-xxx-xxx
const src = URL.createObjectURL(file)通过 FileReader 获取base64信息
const fileReader = new FileReader()fileReader.addEventListener('load', e => { const base64 = e.target.result})fileReader.readAsDataURL(file) 分享
如果这篇文章对你有帮助，欢迎分享给更多人！
JS粘贴事件获得图片信息
https://marrydream.top/posts/web前端/js粘贴事件获得图片信息/ 部分信息可能已经过时
相关文章 智能推荐