原生JS实现复制图片和文本内容

最近开发上有个需求是要实现一键复制图片的功能，查阅了相关资料后发现有几种可以实现的方式，但总体而言网上的信息都较为零散，所以这里总结一下自己最近的心得，有需要的可以借鉴一下。

原生JS实现复制

这种方式主要使用到了几个比较重要的知识点，分别是range、selection、execCommand，主要实现方式是通过range来选中我们需要复制内容的dom元素，然后通过selection来获取选中的范围，最后通过execCommand(‘copy’)来实现复制
先来讲讲range

Range

介绍

官方解释是：Range 对象表示文档的连续范围区域，如用户在浏览器窗口中用鼠标拖动选中的区域。
其实就是我们用鼠标按住拖动选中的范围，这个范围一般是一个开始节点和一个结束节点之间的范围，这里不详细讲，有需要可以看官方文档Rang对象详解。

使用

创建： let range = document.createRange()
选中某个节点： range.selectNode(node)
选中某个节点的内容： range.selectNodeContents(node)

getSelection

介绍

官方解释是：getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围或插入符的当前位置。详情看getSelecion对象详解。

使用

创建： let selection = window.getSelection()
获取选中内容： let result = selection.toString()
添加一个选中范围： selection.addRange(range)
清空选中： selection.removeAllRange()

execCommand

文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容，大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用 contentEditable 时，调用 execCommand() 将影响当前活动的可编辑元素。
这里仅使用document.execCommand(‘copy’)来实现复制

copy代码

function copyNode(node) {
  //console.log(node)
  let selection = window.getSelection()
  let range = document.createRange()
  range.selectNode(node);
  //range.deleteContents()
  selection.addRange(range)
  //console.log(range)
  document.execCommand('copy')
  selection.removeAllRanges()
}

将需要复制的元素对象传入copyNode方法即可复制该元素的内容，该元素节点内可以包含文本，图片等内容；
但这里仅限于复制http协议的图片，如果图片是https协议或者是base64编码(这是我要最终实现的目标)的图片，是无法复制的，如果有技术大大可以实现复制base64的图片也请告诉我实现的方法。
因为实际上复制的是一段html代码，所以如果复制的元素包含http协议图片，仅能黏贴到支持text/html格式的输入框内，而且需要一定的网络来进行，否则无法成功复制。

(以上阐述均是自己的见解和总结，如果你有不同的看法或者我有什么地方说错了，敬请谅解，也欢迎你和我交流，如果你知道如何实现复制base64图片，请你一定要告诉我，谢谢！可以如有版权侵权请告知我)

之后也会发布关于另外一种框架来实现复制，以及如何在复制的时候自动追加内容的方法以及原理，谢谢你的关注