本文介绍如何利用 QRCode.js 库，通过 HTML5 Canvas 动态生成二维码。针对微信或 QQ 分享场景，根据用户 ID 等参数实时生成唯一二维码，并实现长按识别功能。文章提供完整的 HTML 结构与 JS 配置代码，涵盖参数设置、编码处理及渲染方式选择。
QRCode.js 简介与引入
QRCode.js 是一款轻量级的 JavaScript 库，专门用于生成二维码。它不依赖任何第三方库，主要通过获取 DOM 元素，并利用 HTML5 Canvas 技术进行绘制。
使用前，首先需要在项目中引入 QRCode.js 文件，可通过相关渠道下载获取。
若生成的二维码内容固定不变，直接使用网上现有的静态二维码生成工具即可，无需编写代码。
动态生成场景分析
然而，在实际应用中，往往需要根据不同用户信息动态生成二维码，以便在微信或 QQ 等社交软件中分享。这种场景下，必须通过代码实现动态生成，并确保生成的二维码支持长按识别功能。
接下来直接展示核心实现代码。
HTML 与 JS 实现代码
HTML 结构部分，主要包含一个用于承载二维码的容器。
<div id="codeBox">
<div id="qrDiv" style="display: none;"></div>
<div id="qrcode"></div>
</div>在 JavaScript 部分，需要实例化 QRCode 对象并配置相关参数。
var user_id="" //用户ID
user_id=getQueryString('user_id'); //获取user_id参数
var url= '' //请求url
$(function(){
//生成二维码
var downUrl=url+user_id;
var qrcode = new QRCode("qrDiv", {
text: utf16to8(Url),
render: "canvas", //渲染方式有table方式（IE兼容）和canvas方式
width: 128,
height: 128,
typeNumber:-1,//计算模式
colorDark : "#000000", //前景色
colorLight : "#ffffff", //背景色
correctLevel : QRCode.CorrectLevel.H //容错级别
});
var mycanvas1=document.getElementsByTagName('canvas')[0];
//将转换后的img标签插入到html中
var img=convertCanvasToImage(mycanvas1);
$('#qrcode').append(img);//imagQrDiv表示你要插入的容器id
})
//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}
//获取请求参数值
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
//中文编码格式转换
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
以上即为动态生成二维码的完整实现过程，希望能对读者有所帮助。