做项目遇到一个比较奇葩的需求，觉得很有意思，记录下。方便以后回忆。

涉及框架(html2canvas.min.js clipboard.mn.js)：

直接连cdn

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!--复制框架-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
<!--页面DOM截图，即所谓的内容转图片，原理：是截图-->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

需求1：将指定页面内容转换成图片

闲话不多说了，直接上代码把。这是要截取的DOM，内容标签随意。正规就行。

<section class="content" style="margin: 20px auto;">
<p style="line-height:1.7em;font-size:18px;">内容内容内容内容内容内容内容</p>
<p style="line-height:1.7em;font-size:18px;">内容内容内容内容内容内容内容。</p>
<p style="line-height:1.7em;font-size:18px;">内容内容内容内容内容内容内容</p>
</section>

截取相关代码：

$(".btn").on("click",function () {var dataUrl="",newImg="";//涉及2个参数，参数1：DOM对象，参数2，相关属性及属性方法。html2canvas($(".content"), {allowTaint: true,taintTest: false,//获取容器实际宽高，算上padding,border。height: $("content").outerHeight(),width: $("content").outerWidth(),// window.devicePixelRatio是设备像素比dpi: window.devicePixelRatio,onrendered: function (canvas) {//canvas转img,返回的是64位图片url。dataUrl = canvas.toDataURL("image/png", 1.0);//创建img标签newImg = document.createElement("img");//设置img标签urlnewImg.src = dataUrl;//移除原来的内容，即所有的P标签$($(".content p")).remove();//往容器追加img标签（已经赋值了src）$($(".content")).append(newImg);newImg.style.width = '100%';}});});

截取的到指定容器。包括容器的边框。

需求2：复制指定容器页面内容。（是页面的内容跟截屏似的内容）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>target-div</title><script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
</head>
<body>
<!--复制的DOM对象-->
<section id="content" style="margin: 20px auto;">
<p style="line-height:1.7em;font-size:18px;">内容内容内容内容内容内容内容</p>
<p style="line-height:1.7em;font-size:18px;">内容内容内容内容内容内容内容。</p>
<p style="line-height:1.7em;font-size:18px;">内容内容内容内容内容内容内容</p>
</section>
<!--触发按钮，可随意-->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#content">Copy</button>
<!-- data-clipboard-target对应的是容器，我这里是id，则使用data-clipboard-target="#content" -->
<script>//这里强调一下，旧版本的是new Clipboard   。新版本则是ClipboardJS   。//注意一下版本。不然没有效果var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) {//成功执行alert("复制成功");});clipboard.on('error', function(e) {//失败执行alert("复制失败");});
</script>
</body>
</html>

效果：

点击按钮，完成复制，但是要被复制的内容背景都有蓝色。这样的体验是不好的。所以最好是去掉这种蓝色背景。

优化：

鼠标选中一段文字，文字背景变蓝，
如何用JS 或 JQ取消它的选中状态？不是让一开始禁止选中文字，而是让已经选中的取消选中状态。以下是优化代码，只需要添加：

window.getSelection().empty();    这句代码就可以了

<script>//这里强调一下，旧版本的是new Clipboard   。新版本则是ClipboardJS   。//注意一下版本。不然没有效果var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) {//成功执行alert("复制成功");//优化代码，取消选中时的蓝色背景window.getSelection().empty()});clipboard.on('error', function(e) {//失败执行alert("复制失败");});
</script>

效果：

这时候点击复制，复制成功，全程不会出现蓝色背景。

复制结果：

从粘贴结果看来，边框也能复制进去。当然也可以是网页图片之类的。

（PS：如果不需要边框。就直接用.text()方法取内容就可以了。）

经验分享，不足之处，多多体谅。

前端之路：网页内容转图片，并且复制网页内容，并且优化体验。（截图插件Clipboard.js 的使用）。相关推荐

js复制图片文字图文分享到微信/QQ，插件clipboard.js的应用案例
js复制图片-文字,可用于商品复制文案进行分享的功能~ 1.此案例应用到clipboard.js,具体使用可查阅文档: 2.这个框架功能还是比较强大的,复制文本和图片,复制成功后的html的标签会被去 ...
兼容手机PC,点击即可复制文本内容到剪切板插件clipboard.js
开源项目 https://github.com/zenorocha/clipboard.js. (拷贝文本到剪切板不应该复杂,它不应该需要许多步骤以及几百KB的文件,另外,它不应该依靠flash以及其 ...
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
js 一键复制html,js插件clipBoard.js实现一键复制
clipboard.js不需要jquery依赖,也不需要flash的支持,而另一个插件zClip需要依赖于flash,clipboard.js显得更加灵活. 引入clipboard.js 使用方法va ...
浏览器中复制或剪切文本插件 clipboard.js
插件说明这是一个不依赖 flash,不依赖其他框架就能实现文本复制或剪切板的轻量级插件官网地址:http://www.clipboardjs.cn/ 插件安装: 第一种:通过 npm 工具安装 n ...
三个前端浏览器图片制作-风格迁移,图片压缩,照片动漫化
原文链接:https://dsx2016.com/?p=1821 公众号:大师兄2016 风格迁移 https://github.com/reiinakano/arbitrary-image-styl ...
前端插件clipboard 操作剪切板
本期介绍一个非常常用的前端插件 Clipboard.js,Clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 1.clipboard.js ...
使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
我的2017年前端之路总结
原文首发于我的博客年末了,赶着刚考完两门考试,在最后4门考试来临之前抽空写一下今年的小结. 今年格外忙.忙完本科毕设,又马上投入了研究生实验室的搬砖生涯.跟去年一样,列个今年的学习成果清单: 过去的 ...

前端之路：网页内容转图片，并且复制网页内容，并且优化体验。（截图插件Clipboard.js 的使用）。