在vue中利用⚡html2canvas⚡截取div并保存为png图片

前言

有时候在项目中会有遇到生成海报二维码、广告、等等需要动态生成海报图保存到相册。就需要借用到html2canvas，html2canvas获取HTML的某个元素，然后生成Canvas ✨️

这里还利用到了 qrcode 来动态生成二维码

安装

npm install html2canvas --save

npm install qrcodejs2 --save

引入

import html2canvas from "html2canvas" //引入html2canvas

import QRCode from 'qrcodejs2'; // 引入qrcode

使用🌰

   <!-- 需要生成为图片的内容 -->
    <div class="content-box" ref="myPoster" v-show="!hasCover">
      <img src="../../assets/img/QR_bg1.png" alt="">
      <div class="qrcode-wrapper">
        <div ref="qrCodeUrl" class="qrcode-box"></div>
      </div>
    </div>
    
    
     <!-- 生成后的图片 -->
    <div class="cover-img">
       <img :src="dataUrl" alt="" v-show="hasCover">
    </div>
    

    
import html2canvas from 'html2canvas'; // 引入
import QRCode from 'qrcodejs2'  //生成二维码
export default {
  name: 'poster',
  data () {
    return {
        dataURL:'', 
        hasCover: false,
    }
  },
  mounted () {
      this.getUserInfo();
  },
  methods: {
    
   //这里是请求用户信息动态生成二维码
   getUserInfo(){
       //我直接省略了请求 res是请求回来的数据
       this.$nextTick(()=> { // 使用$nextTick，防止数据还没有渲染到html就先转为图片，此时的图片会是空内容的问题
         this.createQrCode(res) //生成二维码
         this.createCanvas()  //把html生成canvas
       })
   },
  
    //生成二维码
    createQrCode (data) { 
      var qrcode =  new QRCode(this.$refs.qrCodeUrl, {
        text: data.qrUrl,
        colorDark: "#000", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.H//容错率，L/M/H
      })
    },
    
    //把html生成canvas
    createCanvas(){
        var _that = this;
        html2canvas(_that.$refs.myPoster, {
          backgroundColor: null
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          _that.dataURL = dataURL;
          _that.hasCover = true
        });
    },
  }
}

完!!!