html2Canvas将html转化成图片

1、安装html2Canvs

npm install html2canvas --save

2、相应组件中引入html2Canvas

import  html2canvas  from  'html2canvas'

3、创建需要生成图片的html

    
需要生成图片的html

4、html2canvas 生成canvas图片

// 注意：  allowTaint: true  和 useCORS: true 不能同时设置，两者只有一个起作用
let htmlDom = document.querySelector('#sharePicBox')
 html2canvas( htmlDom , {
    allowTaint: false,   //允许污染
    taintTest: true,    //在渲染前测试图片(没整明白有啥用)
    useCORS: true,      //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
    background: "#fff",
}).then(function(canvas) {
   callBack();          //回调
})

或者：
html2canvas( htmlDom , {
      allowTaint: false, //允许污染
      taintTest: true, //在渲染前测试图片(没整明白有啥用)
      useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
      background: "#fff",
      onrendered: function (canvas) {
            callBack();     //回调
      }
});

5、利用 canvas.toDataURL 将生成的图片转成 base64

//回调内容
imgBlob = canvas.toDataURL( 'image/jpeg', 1.0 );    //将图片转为base64

imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1 );        //截取base64以便上传

6、问题总结

6.1 生成图片裁剪不完整
    解决：将图片 html 放在页面根部，即相当直接放在 body 的内部

6.2 需要绘制的图片跨域问题
    解决： 1) 设置 useCORS: true,   使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
        2) img图片设置属性 crossorigin="anonymous"
        
6.3 转换base64不成功
    解决：allowTaint: true  允许污染，被污染的 canvas 是没法使用 toDataURL() 转 base64 流的

6.4 图片清晰度差
    解决：html结构样式放大一倍来设置，最后缩小一倍显示在页面中