js 点击按钮生成带二维码的图片

1、html引入以下两个插件

2、html页面代码：

//装二维码用的
//最终生成的图片用的

3、生成二维码

//生成二维码
        new QRCode(document.getElementById("code"), data.url);  // data.url就是放在二维码里面的参数，

4、将二维码和图片和个人头像合成一张图片

function pictureMerging() {
        var canvas = document.createElement("canvas");
        canvas.width = 318.75;
        canvas.height = 566.95;
        var context = canvas.getContext("2d");
        var imgSrc1 = document.getElementById("PHimg").src;//头像地址
        //以下是生成的图片会模糊，处理图片模糊的方法
        var devicePixelRatio = window.devicePixelRatio || 1,
            backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1,
            ratio = devicePixelRatio / backingStoreRatio;
        var oldWidth = canvas.width;
        var oldHeight = canvas.height;
        canvas.width = oldWidth * ratio;
        canvas.height = oldHeight * ratio;
        canvas.style.width = oldWidth + 'px';
        canvas.style.height = oldHeight + 'px';
        context.scale(ratio, ratio);
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#fff"；//文字颜色
        context.fill();
        var myImage = new Image();
        myImage.src = "images/1212.png";    //背景图片  你自己本地的图片或者在线图片
        // myImage.src = "images/bj.png"; 
        myImage.crossOrigin = 'Anonymous';//处理跨域
        myImage.onload = function () {
            context.drawImage(myImage, 0, 0, 318.75, 566.95);
            context.font = "16px PingFangSC-Medium";
            context.fillStyle = '#333333';
            context.textAlign = 'center';
            //中间x坐标-（文字长度/2*每个字占的位置大小）160-phName.length/2*10
            context.fillText(phName, 160, 290);
            var myImage2 = new Image();
            // myImage2.src = 'images/11.png';
            myImage2.src = imgSrc; //二维码地址
            myImage2.crossOrigin = 'Anonymous';
            myImage2.onload = function () {
                context.drawImage(myImage2, 120, 391.5, 79, 79);
                context.font = "12px PingFangSC-Medium";
                context.fillStyle = '#ffffff';
                context.textAlign = 'center';
                context.fillText("本图片二维码自生成后30天内有效", 160, 550);
                var myImage3 = new Image();
                myImage3.src = imgSrc1;//头像
                // myImage3.src = 'images/tx.png'
                myImage3.crossOrigin = 'Anonymous';
                myImage3.onload = function () {
                    context.beginPath();
                    context.arc(160, 241, 24, 0, 2 * Math.PI)
                    context.clip()
                    context.drawImage(myImage3, 135, 217, 48, 48)
                    var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
                    var img11111 = document.getElementById('avatar');
                    img11111.setAttribute('src', base64);
                    imageData = base64.split(',')[1];
                }
            }
        }
}

以上点击按钮生成带二维码的图片，就这么出来啦。有好的建议欢迎在评论去留言，谢谢~