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

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

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

一、先说问题原因

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

二、解决方案

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

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

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

/* ---- 1.创建读取剪贴板容器 ----*/ const input= document.createElement('div'); // 设置可编辑 input.setAttribute('contenteditable', "true"); // 加入样式，在网页中隐藏该元素，建议脱离文档流，防止布局混乱 input.classList.add('draw-readclipbrdImg'); // 防止输入干扰 input.addEventListener('keydown', (e) => { e.preventDefault(); }); document.appendChild(input); /* ---- 2.该容器对剪贴板图片读取 ----*/ // 获取剪贴板内容 const readClipbrd = () => { // 清空数据，防止数据干扰 input.innerHTML=''; // 获取焦点，并执行粘贴命令 input.focus(); document.execCommand('paste'); } // 读取图片 const readImg = () => { // 这里需要异步 setTimeout(_ => {(resolve, reject) => { const img = input.querySelector('img'); if (img) { // 非必须清除网页图片的样式，看实际是否需要 img.style = {}; // 返回结果 resolve(img); // do ..... } else { // 没有图片，放弃操作 } input.innerHTML = ''; }, 200); }; /* ---- 3.监听粘贴事件 ----*/ document.addEventListener('paste', readImg);

第2步：监听粘贴事件，调用上面的readClipbrd 方法。

input直接用onkeydown。 document.addEventListener('keydown', e => { readClipbrd(); }); 本人遇到的场景是画布监听，onkeydown无效。键盘监听问题，移步前端杂症–div等容器keydown事件无效（包括vue的@keydown）。

三、注意

keydown监听有效，鼠标单击按钮调用读取方法不好使，也许是焦点问题，目前再寻找解决方案。

四、其他场景：富文本编辑器

虽未做兼容测试，但总体思路还是比较靠谱的。最近研究了一下富文本编辑器，基本也是利用dom的contenteditable属性实现的。另外，外层加上了iframe做隔离防止外部影响。