浅谈如何使用canvas生成二维码_前端canvas生成二维码的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/cjjwgy1314/article/details/125727278

本文适合初学者，详细介绍了如何使用canvas和javascript生成二维码。步骤包括引入jqery和qrcode库，设置二维码容器，创建qrcode实例，并提供了一个包含编号的二维码demo，适用于基于jquery的老项目中批量生成并识别二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用于新手不知道怎么生产二维码，按照步骤一步一步来，自己也可以生成二维码

1.引入需要得js库

引入jquery

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

引入qrcode 文件

    <script src="./qrcode.min.js"></script>

2.给他个容器，也是画布，存放二维码

<div id="qrCode" style="margin:auto; position:relative;"></div>

3.初始化，new qrcode实例

	//实例化，生成二维码
	create_qr: function(url,picName){
        //#qrcode是要显示二维码的容器，实例化之后，就在改元素里面生成二维码了
		$('#qrCode').qrcode({
			width:100,
			height:100,
			render:"canvas",
			typeNumber: -1,
			correctLevel: 0,
			background: "#ffffff",
			foreground : "#000000",
			text: url
		});

4.废话不多说，上demo

<html>
<head>
    <script src="./jquery-1.10.2.js"></script>
    <script src="./qrcode.min.js"></script>
</head>

<body>
    <h1>输入URL以生成二维码</h1>
    <div>
        <label for="qr_link">URL:</label>
        <input id="qr_link" type="text" value="hello er wei ma !!" />
        <input type="button" id="qr_creat" value="生成">
        <div>生成的二维码可以通过手机任意扫描工具，查看其二维码信息</div>
        <br />
        <!-- <input type="text"> -->
    </div>
    <br>
    <p id="qr_container" style="margin:auto; position:relative;"></p>
</body>

<script type="text/javascript">
    //点击生成按钮以后
    document.getElementById("qr_creat").onclick = function () {
        debugger
        var qrcode = new QRCode(  //实例化生成二维码
            document.getElementById("qr_container"), {//二维码存放的div
            width: 160, //设置宽高
            height: 160,
            typeNumber: -1,
            correctLevel: 0,
            background: "#ffffff",
            foreground: "#000000",
            render: 'canvas'
        }
        );
        //根据input框的值生成二维码
        qrcode.makeCode($('#qr_link').val());
        // $("#qr_container").append("<span>11111111<span>"); //换行

        debugger
        $('#qr_container img').hide();//隐藏img标签
        $('#qr_container canvas').css({ 'display': 'block', 'padding-bottom': '10px' })

        //生产的二维码自动下载到本地
        let canvas = $('body').find('canvas')[0];
        debugger
        const a = document.createElement('a');
        // var imgData = canvas.toDataURL('image/png').split('base64,')[1];
        var imgData = canvas.toDataURL('image/png');
        a.href = imgData;
        console.log(imgData);
        a.download = '001' + '.png';
        a.click()
    }
</script>
</html>

5.给画布的二维码添加编号

        //获取#qrcode元素中canvas元素的个数
		var len = $('#qrCode').find("canvas").length;
	    //把图片名称赋予对应的canvas元素
		$($('#qrCode').find("canvas") [len-1]).data().picname = picName;
		var picName_val = picName.split('.png')[0];
		var canvas_ele = $('#qrCode').find('canvas')[len-1];
		var ctx = canvas_ele.getContext('2d');
        //绘制一个填充区域
		ctx.fillStyle= '#FFF';//填充区域颜色
        //四个参数分别代表 x轴 y轴 绘制区域宽 高 
        ctx.fillRect(30,186,140,14);
        //添加文字的样式 参数的意义分别为：字体粗细 大小 和类型
		ctx.font = 'normal 14px serif';
        //添加文字的颜色
        ctx.fillStyle= 'black';
        //三个参数分别代表 文字内容 x轴坐标 y轴坐标
		ctx.fillText(picName_val, 45 , 200);

项目说明：基于jquery框架的项目，可以用于批量下载二维码时批量添加编号，贴在设备商便于识别，老的企业项目很实用！