vue项目中使用html2canvas将html页面生成图片，并在弹窗中显示

1、npm引入html2canvas

npm install html2canvas

2、项目引入html2canvas

import html2canvas from 'html2canvas';

3、html代码，省略了具体的页面内容代码。
弹窗控件使用了vant中的popup

引入popup

import Popup from 'vant/lib/popup';
import 'vant/lib/popup/style';

html

<div ref = 'imageDom'>
...........
</div>
<Popup v-model = showPopup :style = "{width: '80%'}">
    <img :src = imgSrc width = '100%' height = 'auto'>
</Popup>

js 通过按钮触发方法,此方法中简单生成base64码，绑定imgSrc显示

createImg () {
      this.showPopup = true;
      //解决截图不完整问题
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
   
      html2canvas(this.$refs.imageDom).then((canvas) => {
        this.imgSrc = canvas.toDataURL('image/png')
          .replace('image/png','image/octet-stream')   
      })
    }

4、调整各项参数 （具体各项参数见末尾官网）

html2canvas(this.$refs.imgDom, {
        allowTaint: true,
        scale: 2,
        dpi: 182,     //导出图片清晰度
}).then((canvas) => {
      var context = canvas.getContext('2d');
      //去除抗锯齿，增加清晰度
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      
      var src64 = canvas.toDataURL()
   }）

5、html2canvas官网地址

http://html2canvas.hertzen.com/documentation