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>