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

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

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

直接连cdn

 

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

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

内容内容内容内容内容内容内容
内容内容内容内容内容内容内容。
内容内容内容内容内容内容内容

截取相关代码：

$(".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：复制指定容器页面内容。（是页面的内容跟截屏似的内容）

 

    
    
    




内容内容内容内容内容内容内容
内容内容内容内容内容内容内容。
内容内容内容内容内容内容内容


Copy

 

效果：

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

优化：

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

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

效果：

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

复制结果：

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

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

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