js生成二维码合并另一张图，生成新的canvas并下载

weixin_42416183

已于 2024-03-25 11:32:27 修改

阅读量195

点赞数 1

文章标签： javascript 前端开发语言

于 2024-03-25 11:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_42416183/article/details/136972719

版权

文章介绍了如何使用qrcode.js库在网页上创建动态二维码，并将其与背景图片合并后下载为PNG文件。主要涉及创建HTML元素、设置二维码参数、使用canvas绘制和下载图片的过程。

摘要由CSDN通过智能技术生成

用qrcode.js实现

declare class QRCode {
	 constructor(el: HTMLDivElement, options: {
      width: number,
      height: number,
      text: string,
      colorDark: string,
      colorLight: string
   });
}
function drawAndShareImage(bgImage: string | HTMLImageElement, url: string, placeHolder: 
HTMLDivElement, qrcodeSize: number = 150, padding: number = 5): void{
`let qrCodeElement = document.createElement("div") as HTMLDivElement; // 创建一个div存放生成的二维码

    new QRCode(qrCodeElement, {
        width: qrcodeSize,
        height: qrcodeSize,
        text: url,
        colorDark: "#000000",
        colorLight: "#ffffff",
    });
    

    function _drawAndShareImage(bgImage: HTMLImageElement ,placeHolder?: HTMLDivElement) {
        let width = bgImage.width  //背景图宽度
        let height =bgImage.height  //背景图高度
        let canvas = document.createElement("canvas") as HTMLCanvasElement; //创建一个canvas用于存放合并后的图片
        placeHolder&& placeHolder.appendChild(canvas) //如果有div，把canvas加到div中

        canvas.width = width
        canvas.height = height
        let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

        //画上二维码
        let codeimg = new Image();
        codeimg.src = (<HTMLCanvasElement>qrCodeElement.querySelector("canvas")).toDataURL("image/jpg");
        codeimg.onload = function () {
            ctx.drawImage(bgImage, 0, 0); //绘制图像进行拉伸
            // 绘制白色背景
            ctx.fillStyle = 'white';
            let qrLeft = width - (width / 2) - (codeimg.width / 2) //二维码偏移量
            let qrTop = height - (height / 2) - (codeimg.height / 2)
            ctx.fillRect(qrLeft - padding, qrTop - padding, codeimg.width + padding * 2, codeimg.height + padding * 2); // 二维码添加白色背景边框
            ctx.drawImage(codeimg, qrLeft, qrTop);

          
            const a = document.createElement('a'); 
            a.href = (<HTMLCanvasElement>canvas).toDataURL('image/png'); //合并后的图转换为base64编码
             a.download = 'capture_' + Math.floor(Math.random() * 10000) + '.png';
             a.click();
        }
    }


    if (typeof bgImage == "string") {
        let img = new Image();
        img.src = bgImage;
        img.setAttribute("crossOrigin", 'anonymous')
        //首先画上背景图   
        img.onload = function () { //必须等待图片加载完成
            _drawAndShareImage(img,placeHolder);
        }
    } else {
        _drawAndShareImage(bgImage,placeHolder);
    }
}