微信不支持download下载功能,下载功能如果需要的话可以调用的是wx自己的api,但需要chooseId ,chooseId 的获取是要使用上传接口获得。
所以可以采用通用的方案,长按保存,隐藏一个透明度为0的 img 区域置在最顶部(本文代码引用vue-qriously 用于生成项目所需的二维码,html2canvas,通过将生成的二维码部分的html转成图片路径。)
因为透明度为0的图片在最上面,所以长按会触发微信的保存图片功能。
<img class="qr_code-image" :src="imageUrl" v-if="imageUrl" />
import html2canvas from "html2canvas"; // html -> canvas
import VueQriously from "vue-qriously"; // 生成二维码
html2canvas(this.$refs["qr_code-contain"], {
useCORS: true,
scale: 2,
dpi: window.devicePixelRatio * 2,
}).then((canvas) => {
console.time("start:1");
let data = canvas.toDataURL("image/jpeg", 1);
if (this.isWX) {
this.imageUrl = data;
} else {
// 用于兼容程序在h5环境的下载
let a = document.createElement("a");
a.download = "检查二维码";
a.href = data;
a.click();
}
console.timeEnd("start:1");
});