• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 1周前 (02-18) 8次浏览
需求背景:

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


程序员灯塔
转载请注明原文链接:生成带二维码的海报图—批量生成多个
喜欢 (0)