JS实现将图片复制到剪贴板

前言

最近项目新增需求：用户能够拖拽页面上的图片文件到word文档。
当操作浏览器里拖拽图片至别的程序，在word文档中展示出获取到的只是图片的url地址，而非预期的图片文件。在现有的拖拽事件所提供api无法满足需求的情况下，换一个思路走：尝试将图片复制到剪贴板。

对于原生js的复制操作，已有封装好的库clipboard.js，但是封装得太死，无法满足更多定制化的需求，主要表现在以下两点：

1. 只接受click事件，无法绑定其他事件。
2. 只复制目标节点的子节点，对于img标签，如果不额外包裹一层父元素，无法实现图片复制。

参考clipboard.js源码，了解了实现原理后（其实非常简单！:) ），我们就能自己动手封装一个复制方法：

概述

Range对象

Range表示包含节点和部分文本节点的文档片段。最常见的就是用户在浏览器拖动鼠标选择的内容（user selection）

比如上图这块蓝色高亮区域。

在现代浏览器中（IE9以上），你可以通过Document.createRange()方法或者new Range()创建一个Range对象；当需要获取user selection时,你应该使用window.getSelection()方法获取Selection对象。

有点懵？