html2canvas 插件实现网页截图（html保存为图片）

1、html2canvas 官网： http://html2canvas.hertzen.com/

html2canvas 是一款利用javascript进行屏幕截图的插件。可以使用两种语法格式进行截图：

• 通过在 html2canvas(需要截图的元素).then(function(){}) 的方式向body中 append canvas 图形。

  html2canvas(document.getElementById('id'))
  .then(function(canvas) {document.body.appendChild(canvas);});

• 通过 html2canvas(元素，{属性：属性值}) 的方式。

  html2canvas(document.getElementById("target"), {
    allowTaint: true, //允许污染
    taintTest: true, //在渲染前测试图片(没整明白有啥用)
    useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
    background: "#fff",
    onrendered: function (canvas) {
      imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度
      imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传
    }
  });

  接下来看一个例子。

2.代码部分：

（1）css

#demo{
    background-color: #fff;
}
.red{
   background-color: red;
   width: 50px;
   height: 50px;
}

（2）html

    

        

        
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
        
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
        
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
        
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
        
如果原来使用百分比设置元素宽高，请更改为px为单位的宽高，避免样式二次计算导致的模糊
    
		

截图

（3）js

上述代码中，通过设置canvas的容器为设备 的PixelRatio倍，再将canvas画布缩放，来尽量保证截图的清晰度。

3.demo效果：

（1）静态html

（2）点击截图按钮后，下方蓝色框框内即为截图效果：

4.参考文章：

• html2canvas踩坑记
• 基于html2canvas实现网页保存为图片及图片清晰度优化