生成带二维码的海报图---批量生成多个

Posted 2021-10-05 前端小智

需求背景：

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