生成二维码合成海报并下载

本文介绍如何在小程序中结合JavaScript生成二维码,并将其合成到海报上,最后实现自动下载功能。主要涉及二维码生成和画布合成技术。

生成二维码,选择一张海报,然后生成二维码并下载,
主要代码
生成二维码代码

 ///生成二维码
    var qrcode = new QRCode("qrcode");
    // 生成二维码的方法
    function makeCode () {
        // 二维码地址
        var ewmSrc='http://h5.afocus.net/2022/cs/3/v2.html'
        qrcode.makeCode(ewmSrc);

        setTimeout(function () {
            var ewmSrc=$('#qrcode').find('img').attr('src')
            // console.log(ewmSrc)

        },100)
    }
    makeCode();

合成画布并自动下载

function hecheng() {
    base64 = [];
    draw(function() {
        // document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">';
        // document.getElementById('downloadPic').href = base64[0];
    })
    //自动下载
    setTimeout(function () {
        $("#downloadPic").click();
        document.getElementById("downloadPic").click();
        // $("#downloadPic")[0].click();
    },500)

}
function draw(fn) {
    var hbxzBj= $('#pxfmxz_tc .haib_ylt .yulan span').find('img').attr('src')
    hbImgSrc.splice(0,1,hbxzBj)
   // console.log(hbImgSrc)
    // var c = document.createElement('canvas');
    var c = document.getElementById('mycanvas')
    ctx = c.getContext('2d');

    len = hbImgSrc.length;
    c.width = 750;
    c.height = 1250;
    ctx.rect(0, 0, c.width, c.height);
    ctx.fillStyle = '#fff';
    ctx.fill();
    function drawing(n) {
        if(n < len) {
            var img = new Image;
            //img.crossOrigin = 'Anonymous'; //解决跨域
            img.src =  hbImgSrc[n];
            img.onload = function() {
                if(n == 1) {
                    ctx.beginPath();
                    ctx.rect(240 , 840 , 280 , 280);
                    ctx.fillStyle = '#fff';
                    ctx.fill();
                    ctx.font="normal bold 24px Arial,sans-serif"
                    ctx.fillStyle = "#000";
                    ctx.fillText("长按识别二维码",294,1157);
                    ctx.fillStyle="#fff";
                    ctx.font="30px Arial"

                    ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式
                    ctx.textAlign = 'center';//设置文本的水平对齐方式
                   // ctx.fillText(hbText,c.width/2,518);
                    ctx.lineWidth=10;
                    var lineWidth = 0;
                    var canvasWidth = c.width-80;//计算canvas的宽度
                    var initHeight=40;//绘制字体距离canvas顶部初始的高度
                    var lastSubStrIndex= 0; //每次开始截取的字符串的索引
                    for(let i=0;i<hbText.length;i++){
                        lineWidth+=ctx.measureText(hbText[i]).width;

                        if(lineWidth>canvasWidth){
                            ctx.fillText(hbText.substring(lastSubStrIndex,i),c.width/2,initHeight+400);//绘制截取部分
                            initHeight+=40;//20为字体的高度
                            lineWidth=0;
                            lastSubStrIndex=i;
                        }
                        if(i==hbText.length-1){//绘制剩余部分
                            ctx.fillText(hbText.substring(lastSubStrIndex,i+1),c.width/2,initHeight+400);
                        }
                    }
                    ctx.drawImage(img, 251 , 853 , 256 , 256); //121和129表示二维码距离背景图片左上角的X轴,Y轴,160表示生成的图片中二维码的大小
                } else {
                    ctx.drawImage(img, 0, 0, c.width, c.height);
                }
                drawing(n + 1); //递归
            }
        } else {
            //保存生成作品图片
            base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64.
            //  console.log(JSON.stringify(base64));
            $('#imgBox').html('<img src="' + base64[0] + '">')
            $('#downloadPic').attr('href', base64[0])
            fn();
        }
    }
    drawing(0);
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值