<template>
<div id="box">
<!-- capture 要变成图片的Html盒子 这里要写好样式 生成的海报图片就是这个样式大小 -->
<div id="capture">
<img :src="whoImg" alt="" />
<h4>我是html文本,长按保存图片</h4>
</div>
<button @click="isShow()">生成海报</button>
<button @click="nextImg()">下一张</button>
<button @click="upImg()">上一张</button>
</div>
<van-overlay :show="show" :lock-scroll="false">
<div ref="wrapper" id="wrapper" v-show="show" @click="remove()"></div>
</van-overlay>
</template>
<script>
import html2canvas from 'html2canvas';
import { onMounted, ref } from '@vue/runtime-core';
import { Overlay } from 'vant';
export default {
setup() {
let imgArr = [
{
url: require('@/assets/1.png')
},
{
url: require('@/assets/2.png')
},
{
url: require('@/assets/3.png')
},
{
url: require('@/assets/logo.png')
}
];
let whoImg = ref();
let indx = ref(0);
let show = ref(false);
let lock = ref(1); // 锁
let wrapper = ref();
// 生成海报 长按就可以保存
const isShow = () => {
show.value = true;
html2canvas(document.querySelector('#capture')).then((canvas) => {
if (lock.value) {
wrapper.value.appendChild(canvas);
lock.value = 0;
}
});
};
// 移除海报
const remove = () => {
show.value = false;
if (!lock.value) {
lock.value = 1;
wrapper.value.innerHTML = '';
}
};
const nextImg = () => {
if (indx.value <= 2) {
indx.value++;
whoImg.value = imgArr[indx.value].url;
}
};
const upImg = () => {
if (indx.value >= 1) {
indx.value--;
whoImg.value = imgArr[indx.value].url;
}
};
onMounted(() => {
whoImg.value = imgArr[0].url;
});
return {
whoImg,
show,
wrapper,
imgArr,
nextImg,
isShow,
remove,
upImg
};
},
components: {
[Overlay.name]: Overlay
}
};
</script>
<style scoped lang="scss">
#box {
background: #ccc;
width: 100%;
height: 100%;
font-size: 16px;
text-align: center;
padding-top: 50px;
#capture {
width: 600px;
height: 600px;
padding: 30px;
box-sizing: border-box;
margin: auto;
img {
width: 450px;
height: 450px;
display: inline-block;
}
}
}
#wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>