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

最新推荐文章于 2024-08-08 08:08:01 发布

了无牵挂的康言先森

最新推荐文章于 2024-08-08 08:08:01 发布

阅读量1.9k

点赞数 1

文章标签： clipboard html2canvas 网页截屏网页内容复制网页转图片

本文链接：https://blog.csdn.net/qq_33368846/article/details/82883719

版权

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

涉及框架(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>