使用html2canvas生成图片

1. 安装

npm i html2canvas

2. 页面中使用

<template>
	<div class="qrcode" id="qrcode">
      <img :src="addressQRCode" alt id="codeImg" />
    </div>
	<div class="saveQrcode" @click="uploadQrcode">保存二维码</div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
	  methods: {
		// 保存二维码
    uploadQrcode() {
      let codeImg = document.getElementById("codeImg");
      codeImg.src = this.addressQRCode;
      codeImg.height = 100;
      codeImg.width = 100;
      codeImg.onload = () => {
        html2canvas(document.getElementById("qrcode"), {
          dpi: window.devicePixelRatio * 2,
          scale: 2,
          useCORS: true
        }).then(canvas => {
          let imgUrl = canvas.toDataURL("image/png");
          var alink = document.createElement("a");
          alink.href = imgUrl;
          alink.download = this.$t("图片名称");
          alink.click();
          this.$notify(this.$t("保存成功"));
        });
      };
	}
}
</script>