<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<!-- 第一页 -->
<div class="swiper-slide" ref="imageTofile" data-screenshot="true">
<!-- 分享 -->
<div class="share_box" @click="download">保存相册</div>
<!-- 标题 -->
<div class="ani img-box" swiper-animate-effect="rollIn" swiper-animate-delay="1.6s">
<img src="./image/one-graduate.png" alt="">
</div>
<!-- 立即查看 -->
<div class="ani look" swiper-animate-effect="bounce" swiper-animate-delay="0.1s" swiper-animate-duration="3s">
立即查看</div>
<img :src="images" v-show="images != ''" id="testImg">
</div>
data() {
return {
images: ‘’
}
}
methods:{
如果需要保存到手机相册,长按生成的图片保存到相册就可以
download() {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null
}).then((canvas) => {
let url = canvas.toDataURL('image/png');
this.images = url;
})
},
}
html,vue保存当前页面为图片(可以保存到相册)
于 2024-04-30 14:59:55 首次发布