- 安装
npm i html2canvas
- 页面中使用
<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>