vue的h5开发中，将页面保存为图片

需求：长按页面保存到手机

实现方式：

　　将页面保存为图片，然后再当前页面实际上展示的是一张图片，

利用移动端自带的功能（长按图片可以保存到手机）来实现这个需求

 

代码：

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" alt="" 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>