vue-移动端-div保存为图片

前端基于YDUI框架开发

<template>
    <div class="invite">
        <div class="inviteMsg">
            <div id="mymap" v-if="!isshow" style="width:100%;height:95%;position: relative;">
                <div id="mapDiv"></div>
                <baseMap>
                    <div class="inviTop">
                        <!--<img src="../../../static/image/invite_2.png" alt="">-->
                        <img :src="avatar" class="userAvatar" />
                        <div>
                            <h3>美术馆里的兔子</h3>
                            <!--<h3>{{ name }}</h3>-->
                            <p class="inviLevel">
                                <img src="../../../static/image/invite_3.png"  alt="" >
                                <span style="color:#666666;">
                                    姝★A级
　　　　　　　　　　　　　　　　　　　　<!--{{level_name}}-->

                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="invitePic">
                        <p class="inviteNoMsg" v-show="erWeiMaB" >
                            {{erWeiMa}}
                        </p>
                        <qriously id='mycanvas' class="erWeiMaPic" :value="QCode" :size="size" v-show="erWeiMaPic" />
                    </div>
                    <p class="scale">
                        扫描上方二维码迅速注册会员
                    </p>
                </baseMap>
            </div>
            <div v-else>
                <img  id="copy_key_ios_wap" :src="qrcodesrc"  style="width:100%" />
            </div>
            <div class="save" @click="downqriousl"  >
                <button class="saveBtn">
                    <img  src="../../../static/image/invite_4.png" alt="" >
                    长按上方二维码保存图片
                </button>
            </div>
        </div>

    </div>
</template>

<script >
    import VueQriously from 'vue-qriously';
    import html2canvas from "html2canvas";

    export default {
        data() {
            return {
                isshow: false,
                qrcodesrc: "",
                avatar: "",
                name: "",
                level_name: "", //用户等级
                QCode: "", // 二维码value
                size: 240, // 二维码大小
                erWeiMaPic: true,
                erWeiMa: "",
                erWeiMaB: false, //是否显示二维码
                dataURL: ""
            };
        },
        mounted() {
            this.initUserData();
        },
        methods: {
            initUserData() {
                // 获取用户昵称头像等信息
                this.$api.userInfo({}, res => {
                    console.log("邀请码", res.data);
                    if (res.status) {
                        this.user = res.data;
                        this.avatar = res.data.avatar;
                        this.name = res.data.nickname;
                        this.level_name = res.data.level_name;
                        this.getShareCode();
                    }
                });
            },
            // 获取二维码
            getShareCode() {
                this.$api.shareCode({}, res => {
                    if (res.status) {
                        console.log("二维码", res.data);
                        let code = res.data;
                        this.QCodeUrl(code);
                        this.downqriousl();
                    } else {
                        this.erWeiMa = res.msg;  //没有二维码，文字提示
                        this.erWeiMaB = true;
                        this.erWeiMaPic = false;
                        console.log("false", res.msg);
                    }
                });
            },
            QCodeUrl(code) {
                this.QCode = this.GLOBAL.locationHost() + "/wap/?url=register&invitecode=" + code;
            },
            //下载图片-div
            downqriousl() {
                html2canvas(document.getElementById("mymap")).then(canvas => {
                    this.imgmap = canvas.toDataURL();
                    console.log("下载二维码");
                    this.isshow = true;
                    this.qrcodesrc = this.imgmap;
                });
            }
        }
    };
</script>

<style scoped>
    .inviteNoMsg {
        height: 5rem;
        line-height: 5rem;
        font-size: 0.28rem;
        font-weight: bold;
    }
    .scale {
        color: #666;
        padding: 0.3rem 0;
    }
    .invite {
        width: 100%;
        height: 100%;
        background-image: url("../../../static/image/invite_1.png");
        background-size: cover;
    }
    .inviteMsg {
        margin: 0 0.2rem;
        background-color: #fff;
        border-radius: 5px;
        position: relative;
        top: 2rem;
        padding: 0 1rem;
    }
    .inviTop {
        padding: 0.4rem 0;
        display: flex;
    }
    .userAvatar {
        width: 1rem;
        height: 1rem;
        margin-right: 0.1rem;
        border-radius: 100%;
    }
    .inviLevel {
        display: flex;
        border: 1px solid #e5e5e5;
        border-radius: 50px;
        padding-right: 0.1rem;
        margin: 0.1rem 0;
        line-height: 0.4rem;
    }
    .inviLevel > img {
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 0.1rem;
    }
    .inviTop h3 {
        color: #333333;
        padding-top: 0.1rem;
        text-align: left;
    }
    .invitePic {
        width: 100%;
        height: 5rem;
    }
    .saveBtn {
        outline: none;
        border: 1px solid #d4b058;
        border-radius: 50px;
        padding: 0.15rem 0.25rem 0.15rem 0.75rem;
        margin-bottom: 0.4rem;
        position: relative;
        font-size: 0.26rem;
        color: #d4b058;
    }
    .saveBtn img {
        width: 10%;
        position: absolute;
        top: .13rem;
        left: .25rem;
    }
</style>