实现方案--web获取剪贴板内容：图片、文字

最近想了解一下canvas，索性仿个pc的画图功能。做到粘贴剪贴板图片功能时，问题来了。

此功能常见场景：聊天窗口复制图片。如，微信web版的聊天窗口，粘贴图片会读取到内容

一、先说问题原因

• 除ie，浏览器出于安全考虑，不会提供直接对剪贴板内容的读、写操作。
• 同样安全考虑，监听到paste事件后，会返回粘贴内容，chrome虽有接口实现但是其内容为空，等于没实现。（操作看不懂了，难道仅为了防止报错么）

二、解决方案

原理：创建一个div并利用contenteditable属性使其可以容纳粘贴的内容，然后利用图片选择器将其取出。

第1步：创建读取剪贴板图片的容器

原理已经说明，直接上代码

/* ---- 1.创建读取剪贴板容器 ----*/
 const input= document.createElement('div');
 // 设置可编辑
 input.setAttribute('contenteditable', "true");
 // 加入样式，在网页中隐藏该元素，建议脱离文档流，防止布局混乱
 input.classList.