茉莉兰亭


偏安一隅

JS粘贴事件获得图片信息

  • 1477 字
  • 次阅读

知识点

  • paste事件：粘贴触发该事件，该事件的事件对象存在一个实验性属性clipboardData，该属性可以获得一个DataTransfer对象
  • DataTransfer对象：本用作保存拖动并放下过程中的数据，在这里也可以获取到剪贴板的数据，通过DataTransfer.items获得一个包含所有存放数据的DataTransferItemList对象
  • DataTransferItemList对象：为一组保存被拖动项(在这里是复制项)的DataTransferItem对象列表
  • DataTransferItem对象：描述了一个拖拽项（在这里为复制项），这里用到了他的getAsFile方法，此方法返回一个关联的File对象，当拖拽项不是一个文件时返回null
  • File对象：File对象是特殊类型的Blob对象(谨记)

实现

在目标元素上注册paste事件，方法名为pasteImg

1
ele.onpaste = pasteImg

在pasteImg方法内实现获取粘贴项File对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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对象

1
const newFile = new File(file, '屏幕截图.png', {type: 'image/png'})

通过createObjectURL获得一个本地临时链接用于显示图片，格式：blob:https://xxx.xx/xxx-xxx-xxx-xxx

1
const src = URL.createObjectURL(file)

通过 FileReader 获取base64信息

1
2
3
4
5
const fileReader = new FileReader()
fileReader.addEventListener('load', e => {
    const base64 = e.target.result
})
fileReader.readAsDataURL(file)
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可