Vue2 html2canvas实现截图

1. 安装html2canvas

npm i html2canvas -S

2. ref 绑定截图区域

<template>
  <div class="save-container box clmcenter">
    <!-- 截图区域 -->
    <div class="savebox clmstart" ref="cutBox" v-show="!imgshow">
      <img src="../assets/img/logo2.png" class="sylogo2">
      <img :src="usercutimg" class="usercutimg" @load="cutimgloaded">
    </div>
    <!-- 最终生成的截图 -->
    <img :src="finalImg" class="finalimg" v-show="imgshow">    
    <p class="savetip">长按图片保存</p>
  </div>
</template>

3. 截图

<script>
import { Toast } from "vant";
import html2canvas from "html2canvas";
export default {
  data () {
    return {
      usercutimg: null,
      finalImg: null,
      imgshow: false,
    }
  },
  mounted () {
    this.usercutimg = this.$store.state.userimgH    
  },
  methods: {
    // 用户上传的图片加载完成后执行截图
    cutimgloaded () {
      this.$nextTick(() => {
        this.cutPicture(this.$refs.cutBox)
      })
    },
    //截图方法
    cutPicture (cutbox) {
      // 等待提示
      Toast.loading({
        message: "照片合成中，请稍后...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      const shareContent = cutbox;
      const width = shareContent.offsetWidth;
      const height = shareContent.offsetHeight;
      const canvas = document.createElement("canvas");
      const scale = 2;
      // 宽高扩大 2 倍 处理图片模糊
      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.getContext("2d").scale(scale, scale);
      const options = {
        width: width,
        height: height,
        canvas: canvas,
        useCORS: true,
        logging: true,
        scale: 1,
        dpi: 300,
      };
      html2canvas(shareContent, options).then((canvas) => {
        const context = canvas.getContext("2d");
        context.scale(scale, scale)
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        // 生成图片地址
        const imgUrl = canvas.toDataURL();
        this.finalImg = imgUrl;
        this.imgshow = true
        // 清除提示
        Toast.clear()
      });
    },
  }
}
</script>

3. 样式部分

<style lang="less" scoped>
img {
  pointer-events: none;
}
.save-container {
  .logo {
    width: 42%;
  }
  .savebox,
  .finalimg {
    position: relative;
    width: 100%;
    height: 421px;   
    .sylogo2 {
      position: absolute;
      bottom: 4rem;
      right: 6.5rem;
      width: 1.3%;
      // transform: rotate(90deg);
    }
    .usercutimg {
      width: 100%;
    }
  }
  .finalimg {
    pointer-events: auto;
  }
  .savetip {
    font-size: 1.8rem;
    color: #000000;
    margin: 1rem;
  }
}

</style>

html2canvas缺陷之一：无法捕捉css变量（场景：页面中的图片需要进行放大缩小移动旋转之后截图时）
替代方案：html-to-image

Demo：

// 1. 安装
npm i html-to-image -S
// 2. 引入
import { toPng } from "html-to-image";
// 使用
...
methods:{
  // 点击按钮
  toUpload(){
    // 调用截图方法 cutBox截图区域
    this.cutPicture(this.$refs.cutBox);
  },
  // html-to-image 截图
  cutPicture(cutbox) {
      Toast.loading({
        message: "照片合成中，请稍后...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      return new Promise((resolve, reject) => {
        try {
          // 解决ios白屏问题 pixelRatio像素比率 值越大图片越清晰
          toPng(cutbox, { useCORS: true, pixelRatio: 3, quality: 1 }).then(
            () => {
              toPng(cutbox, { useCORS: true, pixelRatio: 3, quality: 1 }).then(
                () => {
                  toPng(cutbox, {
                    useCORS: true, // 跨域
                    pixelRatio: 3,
                    quality: 1,
                  })
                    .then((url) => {
                      this.finalImg = url;
                      this.btnshow = false;
                      this.savetipsflag = true;
                      this.imgshow = true;
                      Toast.clear();
                      resolve();
                    })
                    .catch((err) => {
                      Toast.clear();
                      Toast("截图生成失败,请稍后再试！");
                      reject(err);
                    });
                }
              );
            }
          );
        } catch (err) {
          reject(err);
        }
      });
    },
}
...