html2canvas实现截图（踩坑版）

前言： 不是第一次接到截图的需求了，之前是在小程序中实现海报的截图，富文本文章详情的截图，前者使用的是canvas, 后者使用的是调用chrome的截图功能，此次我打算使用html2canvas来实现一下截图需求

目录

1.  截图效果

2. 操作步骤

3. 踩坑记录

4. 完整示例代码

5. 温馨提示

---

1.  截图效果

需要截图的页面:

截图出来的效果：

2. 操作步骤

2.1. 安装html2canvas包

npm install html2canvas

  安装好这个之后，把项目跑起来

2.3. 需要绘制哪个div(区域)中的内容，我们可以通过定义ref,或者给它一个id名，或者给其取一个类名，等下写获取方式

2.4. 写一个调用方法，触发绘制

makePoster(obj) {
      // html2canvas(document.getElementById('poster1'), {
      html2canvas(this.$refs.poster, {
        logging: true,
        useCORS: true,  // 是否跨域
        width: 375,
        height: 600,
        allowTaint: true,
        // scale: 2, // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
        document.body.appendChild(canvas); // 自动在下方显示绘制的canvas图片
      });
    },

3. 踩坑记录

可能情况 只画出图片或者文字，且位置不正常

第一种情况：图片画不出来

解决方法： 使用useCORS: true, 允许图片跨域

第二种情况： 文字画不出来

解决方法： html2canvas不支持该文字字体，更换字体或其他

第三种情况： 设置foreignobjectrendering： true, 不能同时展示图文

解决方法： 更改html2canvas的版本， 首先移除 html2canvas 【npm uninstall html2canvas】
然后安装指定版本 【npm install --save html2canvas@1.0.0-rc.4】

4. 完整示例代码

<template>
  <div class="poster" @click="makePoster({})">
    <div class="lucky-poster" ref="poster" id="poster1">
      <img src="https://duoke-card.oss-cn-hangzhou.aliyuncs.com/FahDVGepGVEm840b16eb318ce8f5f5465712a3932c06.png" alt="" />
      <div v-html="formatWord(tipsConf[0])" class="luckiness"></div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
  data() {
    return {
      postersConf: {
        message: '祝福文案',
        picIndex: 0,
        isShow: false,
      },
      posterList: [
        { id: 0, imgurl: '', tips: '金色鎏金' },
        { id: 1, imgurl: '', tips: '金色鎏金' },
        { id: 2, imgurl: '', tips: '金色鎏金' },
      ],
      tipsConf: {
        0: '今天是一个特别的日子，\n岁月见证成长，\n时光镌刻幸福。\n感谢您一如既往的支持和认可，\n多保鱼始终伴您左右，为您守护美好---\n在此为您献上最诚挚的祝福，\n生日快乐，感恩有您！',
        1:"一岁一礼，一寸欢喜。\n在这特殊的日子里，祝您的家人生日快乐，\n万事胜意，家庭美满，平安康顺"
      }
    }
  },
  methods: {
    makePoster(obj) {
      console.log('e.targer', obj);
      // this.$set(this.postersConf, 'isShow', true)
      html2canvas(this.$refs.poster, {
        // html2canvas(document.getElementById('poster1'), {
        // html2canvas(document.body, {
        logging: true,
        useCORS: true,
        width: 375,
        height: 600,
        allowTaint: true,
        // scale: 2, // 提升画面质量，但是会增加文件大小
      }).then((canvas) => {
        document.body.appendChild(canvas); // 自动在下方显示绘制的canvas图片
      });
    },
    exportPicture(link, name = '未命名文件') {
      // let link = canvas.toDataURL();
      const file = document.createElement('a');
      file.style.display = 'none';
      file.href = link;
      file.download = decodeURI(name);
      document.body.appendChild(file);
      file.click();
      document.body.removeChild(file);
    },
    formatWord (val) {
      return val.replace(/\n/g, '<br>')
    },
  }
}
</script>
<style lang="scss" scoped>
.lucky-poster {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: bold;
    color: #333333;
    // display: flex;
    position: relative;
    margin-bottom: 50px;
    // z-index: -999;
    img {
      display: block;
      width: 100%;
      height: 600px;
    }
    .luckiness {
      position: absolute;
      color: rgb(227, 220, 220);
      top: 420px;
      left: 20px;
      right: 20px;
      text-align: center;
    }
  }
</style>

5. 温馨提示

    宝子们，我又来了，当我将这个绘画海报的页面嵌入到app之后，出现了很严重的问题，如下

        

唉，根本没法交差啊，还好绘制祝福海报是一种比较简单的海报类型，考虑到兼容性问题，今天上午我还是用canvas画图了，画这种海报很简单的，封装一下画文字，画图片，就可以了，下一篇文章讲