h5使用html2canvas将dom元素直接转为图片

冰淇淋咯
已于 2024-06-22 16:51:47 修改
阅读量591
点赞数 1
CC 4.0 BY-SA版权
文章标签：前端 javascript
于 2024-06-22 16:47:25 首次发布
本文链接：https://blog.youkuaiyun.com/GKISX1216/article/details/139884497
首先，在 HTML 文件中引入 html2canvas 库：

写好基本页面，使用new QRCode生成需要的二维码，使用 html2canvas直接生成图片即可，微信小程序不可以使用html2canvas 方法，原生微信小程序使用canvas生成收款码图片
效果图：
实例代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <meta name="divport" content="width=device-width, initial-scale=1">
    <script src="static/js/vue.global.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/api.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/vant.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
    <link href="static/css/vant.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <van-nav-bar title="" left-arrow fixed placeholder z-index="999" :safe-area-inset-top="true"
            @click-left="handlerBack"></van-nav-bar>
        <div id="share-view" class="group_box">
            <img class="check" src="./static/images/check.png" alt="">
            <div class="check_text">支持使用微信到店扫码买单</div>
            <div class="group_bgc">
                <div class="code_main">
                    <div class="code">
                        <div id="qrcode"></div>
                    </div>
                    <div class="store_name">{{shop_name}}</div>
                    <div class="software_pay">
                        <img src="./static/images/wechat_pay.png" alt="">
                    </div>
                </div>
            </div>
        </div>

        <div v-if="shareBase64" class="bg-image">
            <img :src="shareBase64" style="width: 100%;" />
        </div>
        <!-- <div class="btn">
            <div class="bxts">保存到相册</div>
        </div> -->
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    shareBase64: undefined,
                    jump_url: '', // 二维码地址
                    shop_name: '碧打碗红小龙虾',// 门店名称
                };
            },

            mounted() {
                this.drawqrcode()
            },
            methods: {
                handlerBack() {
                    history.back();
                },
                drawqrcode() {
                    let query = getQuery()
                    const that = this;
                    var qrcode = new QRCode(document.getElementById('qrcode'), {
                        text: this.jump_url,
                        width: 300,
                        height: 300,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.makeImage()
                        }, 500)
                    })
                },

                makeImage() {
                    html2canvas(document.getElementById('share-view')).then((canvas) => {
                        this.shareBase64 = canvas.toDataURL("image/png");
                    });
                }
            }
        })
        app.use(vant);
        app.mount('#app')
    </script>

    <style>
        /* 生成二维码 */
        #qrcode {
            width: 180px !important;
        }

        #qrcode img,
        #qrcode canvas {
            width: 100% !important;
            height: 100%;
        }

        .bg-image {
            opacity: 0;
            position: fixed;
            top: 50px;
            left: 0;
        }

        .van-icon {
            color: #fff !important;
        }

        .van-nav-bar,
        body {
            background-color: #112E98;
        }

        .van-hairline--bottom:after {
            border-bottom-width: 0 !important;
        }

        .group_box {
            width: 100%;
            background-color: #112E98;
        }

        .check {
            width: 263px;
            margin-top: 21px;
            position: relative;
            left: 50%;
            transform: translate(-50%);
        }

        .check_text {
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 15px;
            font-family: PingFangSC-Regular;
            font-weight: normal;
            text-align: center;
            white-space: nowrap;
            line-height: 21px;
            padding-top: 11px;
        }

        .group_bgc {
            /* width: 100%; */
            padding: 30px;
            /* box-sizing: border-box; */
        }

        .code_main {
            width: 100%;
            background-color: #fff;
            border-radius: 10px;
            /* box-sizing: border-box; */
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 54px 0 65px;
            /* overflow: hidden; */
        }

        .title {
            font-size: 15px;
            color: #333333;
            line-height: 22px;
            padding: 15px 0 18px;
        }

        .code {
            padding: 5px;
            position: relative;
            background-image: url(./static/images/kuang.png);
            /* width: 55%; */
            background-size: 100%;
            background-repeat: no-repeat;
            /* border: 1px solid #dddddd; */
            height: 183.6px;
        }

        .store_name {
            /* width: 100%; */
            font-size: 18px;
            color: #112E98;
            line-height: 23px;
            text-align: center;
            font-weight: 600;
            white-space: pre-line;
            padding: 15px 20px 0;
        }

        .software_pay {
            margin-top: 23px;
        }

        .software_pay img {
            width: 106px;
            margin: 0 10px;
        }

        .btn {
            position: absolute;
            display: flex;
            justify-content: center;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .bxts {
            width: 355px;
            padding: 12px;
            border: 1px solid rgba(46, 73, 133, 1);
            background: #FFFFFF;
            border-radius: 23px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(46, 73, 133, 1);
            line-height: 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 25px;
        }
    </style>

</body>

</html>