前端之路：网页内容转图片，并且复制网页内容，并且优化体验。（截图插件Clipboard.js 的使用）。
做项目遇到一个比较奇葩的需求，觉得很有意思，记录下。方便以后回忆。
涉及框架(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标签url
newImg.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>效果：
复制结果：
从粘贴结果看来，边框也能复制进去。当然也可以是 网页图片之类的。
经验分享，不足之处，多多体谅。