前端合成图片 插件html2canvas.js和qrcodejs2

下载html2canvans

npm install --save html2canvas

引入html2canvans和qrcodejs2

import html2canvas from "html2canvas"; // 引入 html2canvas
import QRCode from "qrcodejs2";

完整代码

<templete>
    <view class="erweima">
        <div
            class="img"
            id="qrcode"
            ref="qrcode"
            :style="'height:' + height + 'px;width:' + height + 'px'"
        ></div>
        <view class="text">长按识别二维码</view>
    </view>
</templete>
<script>
    import html2canvas from "html2canvas"; // 引入 html2canvas
    import QRCode from "qrcodejs2";
data() {
	return {
		height: window.innerWidth / 4,
	}
}
createShare() {
// 模拟数据加载完成了
uni.showLoading({
	title: "生成中...",
});
this.$nextTick(() => {
  this.crateQrcode(this.wsInfo.share_qrcode_url);
});
}
crateQrcode(text) {
  setTimeout(() => {
    this.qr = new QRCode("qrcode", {
      width: this.height,
      height: this.height, // 高度
      text: text,
      correctLevel: QRCode.CorrectLevel.H,
    });
    this.handleCreate();
  }, 1000);
},
handleCreate() {
  this.$nextTick(() => {
    window.pageYOffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    let dom = document.querySelector("#shareImg"); // 获取dom元素
    let scale = window.devicePixelRatio; // 获取设备像素比
    html2canvas(dom, {
      scale: scale,
      scrollY: 0,
      scrollX: 0,
      useCORS: true, // 【重要】开启跨域配置
      allowTaint: true, // 允许跨域图片
    })
      .then((canvas) => {
        this.hideOldInfo = false;
        this.buildFinish = true;
        let dataURL = canvas.toDataURL("image/png");
        this.shareImage = dataURL;
        uni.hideLoading();
      })
      .catch(() => {});
  });
},
</script>