VUE微信H5生成二维码海报保存在本地相册
一、效果
二、说明
公司需求：宣传海报从后台获取，二维码地址也从后台获得，然后生成一个海报，海报上固定位置放二维码，长按图片可以保存在本地相册(其实前面的需求是点击按钮，下载海报图到本地相册，然后h5下载的实现原理是生成一个a标签链接，然后下载，在电脑模拟器可以下载，在微信浏览器一点反应没有，所以退一步，长按保存),下面是使用版本，UI插件用的是vant(有赞)
vue：“^2.6.11”,
“html2canvas”: “1.4.1”,
“vant”: “^2.8.1”，
“vue_qrcodes”: “^1.1.3”
三、思路
从后端获取海报图，获取二维码链接，然后将二维码定位到图片固定位置，最后通过html2canvas生成canvas,然后通过canvas.toDataURL(“image/png”)生成
四、效果
从第三张图就可以看到长按保存的就是带有二维码的海报图了
四、代码实现
实现的原理就是：先把二维码定位到海报图上，然后通过html2canvas生成带二维码的海报，最后用这个图片覆盖在imageWrapper1元素上，才能下载到带二维码的海报图，这也是为什么要等待框显示正在生成海报图。
<template> <!--子组件-->
<div class="posterpopup">
<van-popup v-model="popupVisible" @closed="closePopup">
<div id="imageWrapper1">
<img
class="posterpopup-img"
:src="popupObj.posterurl || popupObj.photourl"
/>
<div class="qrcode1" ref="qrcode" id="imageWrapper">
<qrcode
:url="qrUrl"
colorDark="#000"
colorLight="#fff"
:wid="wid"
:hei="wid"
:imgwid="imgwid"
:imghei="imgwid"
></qrcode>
</div>
</div>
<div class="posterpopup-img1" v-if="posterUrl">
<img :src="posterUrl" id="posterUrl" />
</div>
<div class="posterpopup-wrap">
<img src="@/assets/image/download.png" alt="" />
<div class="wrap-text">长按保存图片</div>
</div>
</van-popup>
</div>
</template>
<script>
import qrcode from "vue_qrcodes";
import html2canvas from "html2canvas";
export default {
name: "PosterPopup",
props: {
popupVisible: false,
popupObj: {
type: Object,
default: {
},
},
qrUrl: "",
},
components: {
qrcode,
},
data() {
return {
imgwid: 30, // 二维码logo宽度
wid: 80, // 二维码宽度
wrapWid: 80, // 外边框宽度
posterUrl: "",
controllShow: true,
};
},
methods: {
closePopup() {
this.posterUrl = ''
this.$emit("closePopup");
},
toSaveImage() {
// 保存图片
this.$nextTick(async () => {
var imageWrapper = document.getElementById("imageWrapper1");
try {
let canvas = await html2canvas(imageWrapper, {
height: imageWrapper.offsetHeight,
width: imageWrapper.offsetWidth,
backgroundColor: null,
useCORS: true,
allowTaint: true,
scrollX: 0,
scrollY: 0,
dpi: window.devicePixelRatio * 2,
// dpi: 300
});
this.controllShow = false;
this.posterUrl = canvas.toDataURL("image/png");
this.$Toast.clear();
} catch (err) {
}
});
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime });
},
},
watch: {
popupVisible(newVal, oldVal) {
if (newVal) {
this.$Toast.loading({
message: "海报生成中，请稍等",
duration: 0,
className: "zIndex",
});
this.$nextTick(() => {
this.toSaveImage();
});
} else {
this.controllShow = true;
this.$Toast.clear();
}
},
},
};
</script>
<style lang="scss" scoped>
.posterpopup {
.van-popup {
background-color: transparent;
overflow-y: hidden;
width: 568px;
height: 90vh;
}
#imageWrapper1 {
position: absolute;
min-width: 568px;
min-height: 990px;
}
.posterpopup-img {
width: 568px;
height: 100%;
}
.posterpopup-img1 {
width: 568px;
height: 990px;
& img {
width: 100%;
height: 13.2rem;
}
}
.posterpopup-wrap {
position: absolute;
width: 302px;
height: 70px;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
// margin-top: 100px;
margin: 39px auto 0;
& > img {
width: 100%;
height: 100%;
}
.wrap-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
font-size: 30px;
color: #fff;
}
}
#imageWrapper {
position: absolute;
right: 30px;
bottom: 35px;
}
#posterUrl {
position: absolute;
z-index: 2002;
top: 0;
left: 0;
right: 0;
bottom: 90px;
margin: 0 auto;
width: 568px;
}
}
</style>
<!---->
<posterPopup :popupVisible="popupVisible" :popupObj="popupObj" @closePopup="closePopup" :qrUrl="qrUrl"></posterPopup>
五、遇到的问题
1.如果你把海报放到云上(腾讯云，阿里云，七牛云)，就是放在CDN上，那么云一定要设置以下的头文件，如果你不设置这个头文件，就有跨域问题，你就一直会生成不成功，实用html2canvas的话只能生成一个空白背景的二维码，这个搞了好久，采用了放在服务器本地，但是服务器本地图片下载又慢，影响体验，搞了几天，才知道一定要设置！！！
五、遇到的问题
1.如果你把海报放到云上(腾讯云，阿里云，七牛云)，就是放在CDN上，那么云一定要设置以下的头文件，如果你不设置这个头文件，就有跨域问题，你就一直会生成不成功，实用html2canvas的话只能生成一个空白背景的二维码，这个搞了好久，采用了放在服务器本地，但是服务器本地图片下载又慢，影响体验，搞了几天，才知道一定要设置！！！
