需求:长按页面保存到手机
实现方式:
将页面保存为图片,然后再当前页面实际上展示的是一张图片,
利用移动端自带的功能(长按图片可以保存到手机)来实现这个需求
代码:
1、使用 html2canvas
npm install html2canvas -d
2、
<template>
<div>
<div id="captureId" v-show="firstFlag">
<div>
<div class="wrap">
<div>
<span class="star-title">爸气指数:</span>
</div>
<span class="text">扫码测一测你的父亲节爸气指数</span>
</div>
</div>
</div>
<img class="show-img" :src="dataURL" v-show="!firstFlag">
</div>
</template>
<script>
import html2canvas from ‘html2canvas‘
export default {
data () {
return {
firstFlag: true,
dataURL:‘‘
}
},
methods: {
toImg () {
html2canvas(document.querySelector(‘#captureId‘)).then(canvas => {
let imgUrl = canvas.toDataURL(‘image/png‘);
that.dataURL = imgUrl;
that.firstFlag = false;
}).catch(error => {
})
},
},
created () {
this.imgSRC = window.location.href
this.firstFlag = true
},
mounted() {
const that = this
that.$nextTick(function(){
that.toImg()
})
}
}
</script>
原文:https://www.cnblogs.com/haishen/p/11040534.html