2020-06-19 vue html2canvas

import html2canvas from "html2canvas";

 <div class="tabs">

                <div class="tab">

                    <a @click="$router.back(-1)" class="pageback"></a>

                </div>

                <a class="tab" v-for="(tab,index) in tabs" @click="cur=index,goAssignBlock('block'+ index,150)"

                    :class="{active:cur==index}" :key="tab.type">

                    {{tab.type}}

                </a>

                <div class="tab" @click="openPoster">

                    <span class="icon share-icon"></span>

                </div>

            </div>

            <section class="share-poster" @click.stop="closePoster" style="display: none;">

                <div class="share-poster-wrapper">

                    <div class="share-poster-top-tip">长按保存图片</div>

                    <div id="share-poster-main" @click.stop="() => void 0">

                        <div class="share-poster-content">

                            <div class="share-poster-top">

                                <img :src="productList.Thumb" class="share-poster-top-img" @load="loadedThumb" />

                            </div>

                            <div class="share-poster-bottom">

                                <div class="share-poster-bottom-title" id="poster_title">

                                    <div style="font-size: 15px;">{{goodinfo.Title}}</div>

                                </div>

                                <div class="share-poster-bottom-price-wrapper">

                                    <span class="share-poster-bottom-price">

                                        <span v-for="(item,index) in priceDatalist"

                                            v-show="changeLeftBackground == index">

                                            <span v-if='item.payMethod=="2" ' style="font-size: 13px;">

                                                <span>{{item.lxb}}莲香币</span>

                                                <span>+</span>

                                                <span>￥{{item.cash}}</span>

                                            </span>aa

                                            <span v-else  style="font-size: 13px;">

                                                <span>￥{{item.cash}}</span>

                                            </span>

                                        </span>

                                    </span>

                                    <span v-if="goodinfo.IsAdvance == 1" class="share-poster-bottom-advance">订金：<span

                                            class="price">￥{{goodinfo.AdvanceResp.EarnestMoney}}元</span></span>

                                </div>

                                <div class="share-poster-bottom-code">

                                    <span class="share-poster-bottom-qrcode"></span>

                                    <span class="share-poster-code-tip">长按可识别图中的二维码</span>

                                    <span class="share-poster-code-logo">

                                        <img src="/images/lxd_logo.png" />

                                    </span>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

    // 分享图片

            openPoster() {

                this.getShareQrcode();

            },

            // 关闭分享

            closePoster() {

                $('.share-poster').hide();

            },

            // 获取分享二维码

            getShareQrcode() {

                const _this = this;

                if (!this.loadedThumbStatus) {

                    return

                }

                let productID = this.productList.ID;

                if ($('.proPrice').html().length <= 0) return;

                // 判断用户是否登录

                if (!Boolean(getCookie('Id'))) {

                    Toast('您还未登录,跳转登录中...');

                    window.location.href = '/loginRegister/login.aspx?ReturnUrl=' + Base64.encode(window.location.href);

                    return;

                }

                $('.share-poster').show();

                if ($('#share-poster-img').length > 0) return;

                $(window).scrollTop(0);

                $('body').css('overflow', 'scroll');

                checkOverflow();

                _this.toastLoading = Toast.loading({

                    duration: 0, // 持续展示 toast

                    forbidClick: true,

                    message: '图片合成中...',

                });

                axios.get("/my.ashx", {

                    params: {

                        type: 'ProductShareUser',

                        pid: productID,

                    },

                    responseType: 'blob'

                }).then(data => {

                    if (data.status === 200) {

                        // 返回200

                        var blob = data.data;

                        var reader = new FileReader();

                        reader.readAsDataURL(blob);    // 转换为base64

                        reader.onload = function () {

                            var oImg = new Image();

                            oImg.src = this.result;

                            oImg.style = "width:1.12rem;height:1.12rem;pointer-events:none;"

                            $('.share-poster-bottom-qrcode').append(oImg);

                            setTimeout(() => {

                                _this.toastLoading.clear();

                                _this.mixPoster();

                            }, 2000)

                        }

                    }

                }).catch(err => {

                    console.log(err)

                })

            },

            loadedThumb() {

                this.loadedThumbStatus = true;

            },

            mixPoster() {

                html2canvas(document.querySelector("#share-poster-main"), {

                    useCORS: true,

                    scale: 2,

                    dpi: 192,

                }).then(function (canvas) {

                    document.querySelector("#share-poster-main").appendChild(canvas);

                    // 把画布内容放到img里面

                    $('#share-poster-img').css({

                        width: '100%',

                        height: 'auto',

                    });

                    // 插入img

                    var img = document.createElement('img');

                    img.id = 'share-poster-img';

                    img.width = $('#share-poster-main').width();

                    img.src = $('canvas')[0].toDataURL();

                    $('#share-poster-main').append(img);

                    $('.share-poster-content').remove();

                    $('canvas').remove();

                });

            },

//定位

        <section class="skip-home" @click="shipHome">

            <img src="../../../../src/assets/skiphome.png" alt="">

            <span>首页</span>

        </section>

//定位样式

 .skip-home {

        width: 1.18rem;

        height: 1.18rem;

        background-color: rgba(206, 61, 62, .9);

        border-radius: 50%;

        position: fixed;

        bottom: 1.14rem;

        right: .24rem;

        z-index: 100;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        box-shadow: 0px 0px 10px 2px rgba(83, 83, 83, 0.68);

    }

    .skip-home img {

        width: .44rem;

        height: .44rem;

        margin-bottom: 0.08rem;

    }

    .skip-home span {

        color: #fff;

        font-size: .22rem;

    }

    /* ===分享海报样式=== */

    .share-poster {

        /* display: none; */

        position: fixed;

        z-index: 500;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        z-index: 1000;

        background-color: rgba(0, 0, 0, .75);

        -webkit-touch-callout: none;

        -moz-touch-callout: none;

        -ms-touch-callout: none;

        touch-callout: none;

        -webkit-user-select: none;

    }

    .share-poster .share-poster-wrapper {

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

    }

    #share-poster-main {

        width: 84vw;

        background-color: #fff;

        overflow: hidden;

        border-radius: .12rem;

        position: relative;

    }

    .share-poster-content-bg {

        position: absolute;

        width: 100%;

        height: 100%;

        background-color: transparent;

        pointer-events: none;

        -webkit-touch-callout: none;

        -moz-touch-callout: none;

        -ms-touch-callout: none;

        touch-callout: none;

        -webkit-user-select: none;

    }

    .share-poster-content-bg .share-poster-content-bg-tip {

        width: 2rem;

        height: .5rem;

        display: block;

        position: absolute;

        z-index: 100;

        background-color: rgba(0, 0, 0, 0.5);

        border-radius: 2px;

        color: #fff;

        font-size: .24rem;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        line-height: .5rem;

        text-align: center;

    }

    .share-poster .share-poster-top-tip {

        color: #fff;

        font-size: .36rem;

        margin-bottom: 15px;

        text-align: center;

    }

    .share-poster .share-poster-top {

        position: relative;

        height: 76vw;

        overflow: hidden;

    }

    .share-poster .share-poster-top-img {

        width: 100%;

        height: auto;

        display: block;

        pointer-events: none;

    }

    .share-poster .share-poster-bottom {

        display: flex;

        padding: .3rem .24rem .4rem .24rem;

        flex-direction: column;

    }

    .share-poster .share-poster-bottom-info {

        display: flex;

        align-items: center;

        margin-bottom: .3rem;

    }

    .share-poster .share-poster-bottom-title {

        width: 100%;

        color: #666666;

        font-size: 15px;

        height: .88rem;

        text-align: left;

        word-break: break-all;

        /* margin-bottom: .3rem; */

        overflow-wrap: break-word;

    }

    .share-poster .share-poster-bottom-title>div {

        display: inline-block;

        line-height: .44rem;

    }

    .share-poster .share-poster-bottom-price-wrapper {

        color: #A40710;

        font-size: .24rem;

        margin-bottom: .3rem;

        text-align: left;

    }

    .share-poster .share-poster-bottom-advance {

        font-size: .22rem;

        margin-left: .18rem;

    }

    .share-poster .share-poster-bottom-code {

        display: flex;

        align-items: center;

    }

    .share-poster .share-poster-bottom-qrcode {

        display: inline-block;

        width: 1.12rem;

        height: 1.12rem;

        flex: none;

    }

    .share-poster .share-poster-bottom-qrcode img {

        width: 100%;

        height: 100%;

        pointer-events: none;

    }

    .share-poster .share-poster-code-tip {

        color: #999999;

        font-size: .2rem;

        flex: 1;

        text-align: center;

    }

    .share-poster .share-poster-code-logo img {

        width: 1.04rem;

        height: 1.09rem;

        pointer-events: none;

    }

    .share-poster .mix-share-poster-img {

        width: 100%;

        height: auto;

        display: block;

    }