Vue H5页面长按保存为图片

代码真的养发2023-12-04 15:55

安装依赖：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>

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