- 先安装依赖:
npm i html2canvas --save
- 页面引入依赖包:
import html2canvas from "html2canvas";
- 使用html2canvas依赖保存图片时,需要判断当前是否为微信环境,微信内访问不能直接保存图片,所以需要做判断,完整代码如下:
<template>
<div class="container">
// 生成二维码按钮
<van-button @click="getErweima">点击生成二维码</van-button>
// 生成二维码弹窗
<van-overlay :show="show">
<div class="wrapper">
<img :src="img" />
</div>
</van-overlay>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import AraleQRCode from "arale-qrcode";
export default {
name: "index",
data() {
return {
show: false,
img: "",
newImg: ""
};
},
mounted() {
},
methods: {
makeCode() {
const result = new AraleQRCode({
render: "svg",
text: "http://www.baidu.com",
size: 120,
});
const svgXml = new XMLSerializer().serializeToString(result);
const src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgXml)));
localStorage.setItem("image", src);
this.getImg();
},
getImg() {
this.img = localStorage.getItem("image");
localStorage.removeItem("image");
},
onSaveCanvas() {
var targetElement = document.getElementById("screenshot-box");
var canvas = document.createElement('canvas');
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') > -1) {
this.$toast('请长按图片保存');
} else {
document.body.appendChild(canvas);
canvas.width = targetElement.offsetWidth;
canvas.height = targetElement.offsetHeight;
html2canvas(targetElement).then(function (canvas) {
var imageDataUrl = canvas.toDataURL();
var link = document.createElement('a');
link.href = imageDataUrl;
link.download = 'screenshot.png';
link.click();
});
canvas.style.display = 'none'
}
},
getErweima() {
this.show = true
this.makeCode()
var that = this;
this.$nextTick(() => {
if (that.newImg.length > 0) {
return;
}
var targetElement = document.getElementById("screenshot-box");
var canvas = document.createElement('canvas');
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') > -1) {
document.body.appendChild(canvas);
canvas.width = targetElement.offsetWidth;
canvas.height = targetElement.offsetHeight;
html2canvas(targetElement).then(function (canvas) {
var imageDataUrl = canvas.toDataURL();
that.newImg = imageDataUrl;
});
canvas.style.display = 'none'
}
})
},
},
};
</script>
<style lang="scss" scoped></style>