vue中的第三库 html2canvas组件

引入三方库

import QRCode from "qrcodejs2"; //合成二维码
import html2canvas from "html2canvas"; //html元素转为图片

修改bug

图片底部留白问题

项目需求

1. 使用画布创建二维码
2. 生成图片
3. 长按二维码保存图片

源码

<template>
    <div>
        <van-nav-bar title="邀请好友" left-arrow @click-left="this.$baseJs.backPage" />
        <div class="shareBox">
            <!-- <img src="/static/shareBg.jpg" alt class="bg" /> -->
            <img src="/static/share1.png" alt class="bg" />
            <div class="BtnBox">
                <p>我的邀请码：{{inviteCode}}</p>
                <div class="btn" @click="toInviteCode">发送我的邀请</div>
            </div>

            <!-- <img src="/static/u3.png" alt class="shareText" /> -->
        </div>
        <div class="creat-img" ref="box" v-show="imgShow">
            <!-- <img src="/static/20191109224025.png" alt="分享背景图" /> -->
            <img src="/static/share2.png" alt="分享背景图" style=""/>
            <div id="qrcode" ref="qrCodeDiv"></div>
            <div class="inviteCode">
                <p>我的邀请码：{{inviteCode}}</p>
            </div>
        </div>
        <div class="creatBox" v-show="show">
            <!-- <img :src="imgUrl" class="creatImg" /> -->
            <img src="/static/share2.png" alt="分享背景图" class="creatImg" />
            <!-- <div class="creatBox" > -->
            <van-icon name="clear" @click="show=false" />
            <div class="share-img" @touchstart="loop" @touchend="endLoop">
                <p>长按保存图片分享</p>
                <img :src="imgUrl" alt="分享图片" />
            </div>
        </div>
    </div>
</template>

<script>
    // 引入第三方库
    import QRCode from "qrcodejs2"; //合成二维码
    import html2canvas from "html2canvas"; //html元素转为图片

    export default {
        components: {},
        name: "",
        data() {
            return {
                show: false,
                shareButtons: [{
                        text: "微信好友",
                        nativeshare: "wechatFriend",
                        m_share: "wx",
                        src: require("@/assets/icons/u11.png")
                    },
                    {
                        text: "朋友圈",
                        nativeshare: "wechatTimeline",
                        m_share: "wxline",
                        src: require("@/assets/icons/u12.png")
                    }
                ],
                inviteCode: JSON.parse(localStorage.getItem("user")).inviteCode,
                imgUrl: "",
                imgShow: false,
                Loop: null //是否长按
            };
        },
        computed: {},
        watch: {},
        methods: {
            toInviteCode() {
                this.show = true;
                this.imgShow = true;
                setTimeout(() => {
                    /* //解决图片底层留白问题,{useCORS: true,
     //                     width:window.screen.availWidth,  //canvas宽度
     //                    height:window.screen.availHeight, //canvas高度
     //                     windowWidth:document.body.scrollWidth, //获取X轴方向滚动条内容
     //                     windowHeight:document.body.scrollHeight/1.06,//获取Y轴方向滚动条内容
     //                     x:0,//页面在水平方向滚动的距离
     //                    y:0,//页面在垂直方向滚动的距离
     //                }
     */
                    html2canvas(this.$refs.box,{useCORS: true,
                         width:window.screen.availWidth,  //canvas宽度
                        height:310, //canvas高度
                         windowWidth:document.body.scrollWidth, //获取X轴方向滚动条内容
                         windowHeight:document.body.scrollHeight/1.06,//获取Y轴方向滚动条内容
                         x:0,//页面在水平方向滚动的距离
                        y:0,//页面在垂直方向滚动的距离
                    }).then(canvas => {
                        // this.imgUrl = URL.createObjectURL(
                        //   this.base64ToBlob(canvas.toDataURL())
                        // );
                        // 图片地址
                        this.imgUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                        
                        // this.imgShow = false;                
                        this.imgShow = !this.imgShow;

                    });
                }, 100);
            },
            loop() {
                clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function() {
                    console.log("长按了");
                    const file = this.base64ToBlob(this.imgUrl);
                    
                    const $downloadA = document.createElement('a');
                    $downloadA.href = URL.createObjectURL(file);
                    $downloadA.download = 'share.png';
                    document.body.appendChild($downloadA);
                    $downloadA.click();
                    document.body.removeChild($downloadA);
                    
                    // 下载
                    // window.location.href = mycanvas
                    // this.imgShow = false;
                    // this.show = true
            
                    // 网址中打开图片
                    // var open = window.open('about:blank', 'image from canvas');
                    // open.document.write("<img src='" + mycanvas + "' alt='from canvas' />")
                    // window.location.href = open
                }.bind(this), 1000);
            },
            endLoop() {
                clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
            },
            //base64转blob
            base64ToBlob(code) {
                let parts = code.split(";base64,");
                let contentType = parts[0].split(":")[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;

                let uInt8Array = new Uint8Array(rawLength);

                for (let i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {
                    type: contentType
                });
            }
        },
        props: "",
        created() {
            let that = this;
            that.$nextTick(function() {
                new QRCode(this.$refs.qrCodeDiv, {
                    text: `${window.location.protocol}//${window.location.host}/#/register?code=${this.inviteCode}`,
                    width: 100,
                    height: 100,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
                });

            });
        },
        mounted() {},
        beforeCreate() {},
        beforeMount() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        activated() {}
    };
</script>
<style lang='less' scoped>
    //@import url(); 引入公共css类
    .shareBox {
        position: relative;

        .bg {
            width: 100%;
            display: block;
            margin-top: 20px;
        }

        .BtnBox {
            position: absolute;
            width: 100%;
            top: 300px;
            text-align: center;

            p {
                font-style: normal;
                font-size: 16px;
                line-height: 28px;
            }

            .btn {
                margin: 35px auto;
                width: 60%;
                height: 50px;
                background-color: #529BEF;
                border-radius: 20px;
                color: #FFFFFF;
                font-size: 20px;
                line-height: 50px;
            }
        }

        .shareText {
            position: absolute;
            top: 690px;
            width: 200px;
            left: 50%;
            margin-left: -100px;
        }
    }

    .shareImg {
        width: 60px;
    }

    .creatBox {
        position: fixed;
        width: 100vw;
        height: 100vh;
        /* top: 0; */
bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 100;
        text-align: center;

        .creatImg {
            position: absolute;
            /* top: 0; */
            bottom: 0;
            left: 0;
            width: 100%;
height: auto;
            /* height: 100%; */
            opacity: 0;
        }

        .van-icon {
            position: absolute;
            top: 40px;
            right: 40px;
            font-size: 30px;
            color: #fff;
        }

        .share-img {
            position: absolute;
            top: 100px;
            width: 100%;
        }

        p {
            padding: 20px;
            /* // padding-top: 100px; */
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

        img {
            width: 80%;
        }
    }

    .creat-img {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }

        .inviteCode {
            position: absolute;
            top: 20%;
            left: 0;
            width: 100%;
            color: #E21918;
            font-size: 14px;
            text-align: center;
        }

        #qrcode {
            position: absolute;
            top:35%;
            bottom: 0px;
            left: 35%;
            /* margin-left: -40px; */
            width: 100px;
            height: auto;
            text-align: center;
        }

    }
</style>