乐趣区

关于javascript:生成带二维码的海报图批量生成多个

jiezi
需要背景：

1、前端需利用轮播图的模式展现多个产品海报图
2、每个海报图需带有二维码（和业务员身份绑定）
3、可辨认二维码，可保留海报图，可发送给好友

  • 实现思路
    生成二维码工具：qrcode 传送门
    底图（也能够说背景图）用本地图片或者线上图片都可。
    合成两张图：我这里用的是 canvas（html2canvas 也是能够的）

    利用 canvas.toDataURL 批量生成多个海报图的 base64 地址，渲染到 swiper 中。

  • 代码局部
 <div class="swiper-container">
            <div class="swiper-wrapper" id="swiper-content">
                <div v-for="(item, i) in slideOptions" :key="i" class="swiper-slide"
                    :data-info="JSON.stringify(activeSlideInfo)" :data-currentid="i" :data-itemid="item.id">
                    <!-- 具体内容 -->
                    <div class="cover-imgheight">
                        <div class="qr-imgbox" :id="'qr-imgbox'+i">
                            ![](item.resImgUrl)
                        </div>

                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

这里顺便把自定义 swiper 页码的逻辑分享一下

pagination: {
                        el: '.swiper-pagination',
                        type: 'custom',
                        autoplayDisableOnInteraction: false,

                        renderCustom: function (swiper, current, total) {
                            var customPaginationHtml = "";
                            for (var i = 0; i < total; i++) {
                                // 判断哪个分页器此刻应该被激活
                                if (i == current - 1) {
                                    customPaginationHtml +=
                                        '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                                } else {
                                    customPaginationHtml +=
                                        '<span class="swiper-pagination-customs"></span>';
                                }
                            }
                            return '<span class="swiperPag">' + customPaginationHtml + '</span>';
                        },
                    },

我用的是 vue，在组件内，自定义的页码款式，必须要写在 html 代码块下面才会失效，也就是在 template 标签上方写款式，否则自定义的款式不失效 目前没明确为什么

生成海报逻辑

conUrlBase64(qrcodeUrl, postUrl) {
                let that = this;
                let canvas = document.createElement("canvas");
                canvas.width = 750;
                canvas.height = 1334;
                let context = canvas.getContext("2d");
                context.rect(0, 0, canvas.width, canvas.height);
                context.fillStyle = "#fff";
                context.fill();
                let myImage = new Image();
                myImage.src = postUrl; // 背景图片 你本人本地的图片或者在线图片
                myImage.crossOrigin = 'Anonymous';
                myImage.onload = function () {context.drawImage(myImage, 0, 0, canvas.width, canvas.height);
                    let myImage2 = new Image();
                    myImage2.src = qrcodeUrl; // 二维码图片地址
                    myImage2.crossOrigin = 'Anonymous';
                    myImage2.onload = function () {context.drawImage(myImage2, 175, 175, 225, 225);// 调整二维码在背景图内的坐标地位
                        let base64 = canvas.toDataURL("image/png"); //"image/png" 这里留神一下
                        that.postUrlList.push(base64)
                    }
                }
            },

可在接口返回数据的回调函数里，循环调用 conUrlBase64 办法 生成所需的 base64 海报图链接。
我这里的二维码图片是后端间接生成好返回给我的链接地址，也可用 qrcode 插件生成，代码如下：

function createQr(url){
    let qrcodeUrl = '';
    // 生成二维码
    $("#qrcode").empty();
    $('#qrcode').qrcode({
        width: 160, // 宽度
        height:160, // 高度
        text:url
    }); 
    const canvas = $("#qrcode canvas")[0];
    qrcodeUrl = canvas.toDataURL("image/jpeg");
    return qrcodeUrl
}

如果背景图很大的话，生成的 base64 也会很大，这样渲染图片会有点慢，可将 base64 转成 blob。
可参考 这篇文章
有问题分割我：QQ 602353272

退出移动版