需要背景：

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