前端html2Canvas使用总结

注意点：
1.使用background背景图转换会导致图片模糊不清，可以使用img标签展示
2.建议使用npm install --save html2canvas@1.0.0-rc.4 版本 新版本在ios13.4上有兼容问题
3.解决ios15.1系统生成时会刷新页面，图片存储异常丢失问题：
给所有被绘制的标签设置字体：比如 font-family: sans-serif;(根标签写就可以了)

// 1.安装依赖
npm install --save html2canvas@1.0.0-rc.4

//2.使用
<template>
  <div>
    <div ref="canvas">html2Canvas</div>
    <button @click="toImg">生成图片</button>
  </div>
</template>
<script>
import html2canvas from "html2canvas"
export default {
  methods: {
    toImg() {
        const opts = {
            scale: 5, //图片清晰度的保证(一般设2）
            useCORS: true, //允许图片跨域，一定要开启
            backgroundColor: "#fff",  //画布背景色
      };
      html2canvas(this.$refs.canvas, opts).then(canvas => {
             let dataURL = canvas.toDataURL(); //将canvas 转为     img标签需要的base64
             console.log(dataURL);

      })
    }
  }
}
</script>