前端之路：網頁內容轉圖片，並且複製網頁內容，並且優化體驗。（截圖外掛Clipboard.js 的使用）。
阿新 • • 發佈：2018-12-12
做專案遇到一個比較奇葩的需求，覺得很有意思，記錄下。方便以後回憶。
涉及框架(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>效果：
這時候點選複製，複製成功，全程不會出現藍色背景。
複製結果：
從貼上結果看來，邊框也能複製進去。當然也可以是 網頁圖片之類的。
（PS：如果不需要邊框。就直接用.text()方法取內容就可以了。）
經驗分享，不足之處，多多體諒。