html2canvas截图工具初体验

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏，html2canvas脚本将当页面渲染成一个Canvas图片它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

html2canvas 截图原理

它不做实际的屏幕截图，而是基于DOM节点的截图，根据获取DOM的样式表来渲染页面，部分css样式不起作用，对于生成的图片来说，不能100%准确

// 要截图的DOM
 <div id="sharePic">
   <img :src="xxx.png"/>
   <p>这是分享的内容</p>
 </div>

 methods: {
      getSharePic () {
        let _this = this
        
        // 要绘制图片的DIV
        let shareBox = document.getElementById('sharePic')
        
        // 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
        let width = shareBox.offsetWidth
        
        // 返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
        let height = shareBox.offsetHeight
        
        // 返回元素的上外缘距离最近采用定位父元素内壁的距离
        let offsetTop = shareBox.offsetTop
        
        // 创建canvas画布
        let canvas = document.createElement('canvas')
        
        // 指定绘图类型为二维绘图，未来如果支持3D绘图，就可以传递3d参数
        let context = canvas.getContext("2d")
        
        // 返回当前显示设备的物理像素分辨率与css像素分辨率的比率，可理解为像素大小比率
        let scaleBy = Math.ceil(window.devicePixelRatio)
        
        // 定义画布的宽度
        canvas.width = width * scaleBy
        
        // 定义画布的高度
        canvas.height = (height + offsetTop) * scaleBy
        
        let params = {
         useCORS: true, // 允许加载跨域的图片
         tainttest: true, // 检测每张图片都已经加载完成
         scale: scaleBy, // 添加的scale 参数
         canvas: canvas, // 自定义 canvas
         logging: false, // 日志开关，发布的时候记得改成false
         width: width,  // DOM 原始宽度
         height: height // DOM 原始高度
        }
        
        html2canvas(shareBox, params).then(function(canvas) {
          // 获取到图片的url
         let url = canvas.toDataURL()
        })
      }
    }

案例：

DOM 结构页面

html2canvas 生成图  （ 弹窗内 ） url 形式base64格式呈现

注意点：

1.不能渲染出动画的节点，否则生成的图片是破裂的

2.需要开启useCORS配置项，否则微信图片等外部图片会加载不出来

3.html2canvas 截图精度不高，部分css属性不起作用，不能完美呈现原画面样式