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

关于JS操作剪贴板的那些事

  • 原生JS实现复制
    • Range
      • 介绍
      • 使用
    • getSelection
      • 介绍
      • 使用
    • execCommand
    • copy代码

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

原生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图片,请你一定要告诉我,谢谢!可以如有版权侵权请告知我)

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

你可能感兴趣的:(javascript,javascript,html,前端)