浏览器 Web 访问剪切板图片

前言

有时候，咱们但愿能访问用户的剪切板，来实现一些方便用户的功能；可是另外一方面，剪切板里的数据对用户来讲又是很是隐私的，因此浏览器在获取信息方面有安全限制，同时也提供访问接口。

前段时间因为业务功能，须要实现当用户在富文本里进行粘贴操做的时候，若是用户复制的是图片，须要将图片上传服务器后，插入到文本内；看似合情合理的要求，却有不少坑

1、何时能访问剪切板

一、在用户触发 onPaste 事件时（只能是用户进行事件触发），经过事件对象（event）获取。官方文档

let text = (event.clipboardData || window.clipboardData).getData('text');
复制代码

二、Chrome 新增异步剪贴板 API，能够跟用户申请访问权限，获得容许后则能访问。参考知乎的一篇文章

2、访问剪切板里的图片

先说结论

从文件系统复制图片	mac os能拿到最后一张；windows 拿不到数据
截图	mac 和 windows 能获取
在浏览器界面复制	mac 和 windows 能获取

windows 为何一张都拿不到呢，用户在文件系统复制的文件，在剪切板里存的并非图片（猜想存的是图片的标记），因此是拿不到。

代码以下

/** * 触发 paste 事件，响应方法 */
function paste(event) {
    // 拿到数据
    let items = (event.clipboardData || event.originalEvent.clipboardData).items;
	let imgList = []; // 得到图片数据，能够直接写入到 <img src=''> 的src内进行展现 
    let strList = [];
    for (let item of items) {
      // 若是拿到的数据是文件
      if (item.kind === 'file') {
        let blob = item.getAsFile();
        let reader = new FileReader();
        blobList.push(blob);
        reader.onload = ()=> {
          imgList.push(reader.result);
        }
        reader.readAsDataURL(blob);
      } else if(item.kind === 'string') {
        // 若是拿到的数据是字符串
        item.getAsString((s)=>{
          strList.push(s);
        });
      }
    }
}
复制代码

最后，想要彻底实现用户 Contr+C、Contr+V 来发帖，目前还作不到。有一种替代方案，将图片拖动到富文本区域，这个操做也是很方便的，浏览器也都支持。

另外有一个公司的商业产品，他家开发的浏览器插件能支持在桌面复制图片后，粘贴到浏览器里。惋惜目前只支持 windows 系统，mac os 尚未提供；

他们的方案我大体猜想是：安装浏览器插件而且容许运行后，当你在浏览器触发paste粘贴事件后，js调用插件方法，插件去访问系统里的文件（插件其实也是windows 的一个软件，因此能访问文件系统），而后返回给页面的 js。