首页 > 其他 > 详细

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

时间:2019-06-17 18:22:43      阅读:540      评论:0      收藏:0      [点我收藏+]

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

实现方式:

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

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

 

代码:

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>

 

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

原文:https://www.cnblogs.com/haishen/p/11040534.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!