html2canvas实现生成图片以及易出错点

html2canvas 将html元素转为图片

html2canvas(element，options).then((canvas) =>{})

基本使用

• 参数

scale：缩放比例,默认为1
allowTaint：是否允许跨域图像污染画布，默认为false
useCORS：是否尝试使用CORS从服务器加载图像，默认为false
width：canvas画布的宽度,默认为jQuery对象的宽度
height：canvas画布的高度,默认为jQuery对象的高度
backgroundColor：/画布的背景色，默认为透明(#fff),参数可以为#表示的颜色，也可以使用rgba

• 忽略某元素
  在某元素加上以下属性信息即可

data-html2canvas-ignore="true"

• 安装

npm install html2canvas

• 使用

 html2canvas(this.$refs.imageDom, { backgroundColor: null, useCORS: true }).then(canvas => {
     //延迟执行确保万无一失，玄学
    setTimeout(() => {
    //转成图片，生成图片地址
         this.createFile(canvas.toDataURL("image/png"))//可将 canvas 转为 base64 格式
          }, 0)
      }).catch(error => {
    });

易错点

1. 生成图片区域中的dom元素中有img标签，生成图片后，img图片加载不出来

• 添加useCORS:true属性；
• 给要生成canvas的DOM中包含的每一个img标签添加crossorigin="anonymous"属性；
• 确保你的图片CDN服务器支持CORS访问，也就是会返回Access-Control-Allow-Origin等响应头。

2. 不支持box-show、box-radius
3. 生成图片背景色异常，需要在异常的背景色处的dom块元素，设置背景色，一般设置为白色