Vue H5页面长按保存为图片

保存为图片"/>

Vue H5页面长按保存为图片

安装依赖：npm install html2canvas  -d

<template><div class="index"><div id="captureId" class="capture"   v-show="firstFlag"><ul><li>1</li><li>2</li><li>3</li></ul><h2>helloworld</h2></div><img :src="dataURL" alt="" v-show="!firstFlag"></div>
</template>
<script>import html2canvas from 'html2canvas';export default {data () {return {dataURL:'',firstFlag:true,};},mounted(){html2canvas(document.querySelector('#captureId')).then(canvas => {let imgUrl = canvas.toDataURL('image/png');this.dataURL = imgUrl;this.firstFlag = false;})},methods: {}}
</script>
<style lang='less' scoped>
</style>

1. 在<template>标签中定义了组件的模板结构。
2. captureId是一个具有特定id的div元素，它包含一个无序列表（ul）和一个标题（h2）。这个div元素在firstFlag为true时显示。
3. 当firstFlag为false时，通过绑定dataURL属性来显示一个图片，该图片的路径由dataURL提供。
4. 在<script>标签中，首先导入了html2canvas库。
5. 在data属性中，定义了两个变量：dataURL用于存储生成的图片路径，firstFlag用于控制显示的内容。
6. 在mounted方法中，使用html2canvas函数将指定的元素（通过选择器#captureId选取）转换为画布，并将画布转换为图片（png格式），最后将生成的图片路径赋值给dataURL，同时将firstFlag设置为false，以显示图片。
7. methods中暂时没有定义任何方法。
8. <style>标签中定义了样式，使用了Less语法，scoped属性表示样式只作用于当前组件。