在编程的奇幻世界里，如同修仙者追求突破境界，开发者也不断磨砺技能，迈向更高层次。对于立志达到 “金丹期” 的编程爱好者而言，纯原生实现二维码生成堪称一项必备技能，它不仅是信息传递的桥梁，更是锻炼加密和算法思维的绝佳途径。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯原生二维码生成器-未来之窗【仙盟金丹期】</title>
<style>
/* 基础样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
padding: 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 28px;
}
.intro {
color: #666;
font-size: 16px;
}
.controls {
background-color: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
}
textarea, input[type="number"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #bdc3c7;
border-radius: 4px;
font-size: 16px;
transition: border 0.3s ease;
}
textarea {
min-height: 100px;
resize: vertical;
}
textarea:focus, input[type="number"]:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.input-row {
display: flex;
gap: 15px;
}
.input-row .form-group {
flex: 1;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
}
button:hover {
background-color: #2980b9;
}
#qr-container {
text-align: center;
margin-top: 30px;
}
#qr-code {
display: inline-block;
padding: 15px;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 15px;
}
.qr-cell {
display: inline-block;
background-color: #fff;
}
.qr-cell.black {
background-color: #000;
}
#status {
font-size: 14px;
color: #666;
padding: 10px;
}
.success {
color: #27ae60;
}
.error {
color: #e74c3c;
}
.info {
color: #3498db;
}
/* 响应式设计 */
@media (max-width: 600px) {
.input-row {
flex-direction: column;
gap: 0;
}
body {
padding: 10px;
}
.controls {
padding: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h2>纯原生二维码生成器-未来之窗【仙盟金丹期】</h2>
<p class="intro">不依赖任何第三方库，使用纯JavaScript实现</p>
</header>
<div class="controls">
<div class="form-group">
<label for="qr-content">输入内容</label>
<textarea id="qr-content" placeholder="请输入要生成二维码的内容">https://app.未来之窗.com</textarea>
</div>
<div class="input-row">
<div class="form-group">
<label for="qr-version">二维码版本 (1-10)</label>
<input type="number" id="qr-version" min="1" max="10" value="4">
</div>
<div class="form-group">
<label for="qr-module-size">模块大小 (px)</label>
<input type="number" id="qr-module-size" min="2" max="10" value="4">
</div>
</div>
<button id="generate-btn">生成二维码</button>
</div>
<div id="qr-container">
<div id="qr-code"></div>
<div id="status" class="info">请点击生成按钮创建二维码</div>
</div>
</div>
<script>
// 二维码生成核心类 - 纯原生实现
class QRCode {
constructor(content, version = 4, errorCorrectionLevel = 'L') {
this.content = content;
this.version = version;
this.errorCorrectionLevel = errorCorrectionLevel;
this.modules = null;
this.size = 0;
// 错误修正级别对应的掩码
this.errorCorrectionMasks = {
'L': 0, // 7% 容错率
'M': 1, // 15% 容错率
'Q': 2, // 25% 容错率
'H': 3 // 30% 容错率
};
this.generate();
}
// 生成二维码的主函数
generate() {
// 1. 数据编码
const encodedData = this.encodeData();
// 2. 确定二维码大小 (版本决定大小，版本1为21x21，每增加一个版本增加4个模块)
this.size = 21 + (this.version - 1) * 4;
// 3. 初始化模块矩阵
this.modules = Array.from({ length: this.size }, () => Array(this.size).fill(false));
// 4. 绘制定位图案、对齐图案和时序图案
this.drawPositionDetectionPatterns();
this.drawAlignmentPatterns();
this.drawTimingPatterns();
this.drawFormatInformation();
this.drawVersionInformation();
// 5. 填充数据
this.fillData(encodedData);
// 6. 应用掩码
this.applyMask();
}
// 数据编码
encodeData() {
// 处理文本数据
let data = '';
for (let i = 0; i < this.content.length; i++) {
// 将字符转换为16位二进制
let bin = this.content.charCodeAt(i).toString(2);
while (bin.length < 16) bin = '0' + bin;
data += bin;
}
// 添加模式指示符 (1000 表示8位字节模式)
data = '1000' + data;
// 添加终止符 (最多4个0)
data += '0000';
if (data.length % 8 !== 0) {
// 填充至8的倍数
const padLength = 8 - (data.length % 8);
data += '0'.repeat(padLength);
}
// 限制数据长度（根据版本和纠错级别）
const maxDataLength = this.getMaxDataLength();
if (data.length > maxDataLength * 8) {
throw new Error('内容太长，请增加版本号或缩短内容');
}
// 添加填充字节
let padBytes = [0xEC, 0x11];
let padIndex = 0;
while (data.length < maxDataLength * 8) {
let padBin = padBytes[padIndex].toString(2);
while (padBin.length < 8) padBin = '0' + padBin;
data += padBin;
padIndex = (padIndex + 1) % 2;
}
return data;
}
// 获取最大数据长度（根据版本和纠错级别）
getMaxDataLength() {
// 版本1-10的最大数据长度（L级纠错）
const maxLengths = [
0, 41, 77, 127, 187, 255, 322, 370, 461, 552, 652
];
return maxLengths[this.version] || 652;
}
// 绘制定位图案（三个角上的正方形）
drawPositionDetectionPatterns() {
const size = this.size;
// 左上角
this.drawPositionPattern(6, 6);
// 右上角
this.drawPositionPattern(size - 7, 6);
// 左下角
this.drawPositionPattern(6, size - 7);
}
// 绘制单个定位图案
drawPositionPattern(x, y) {
// 外框 (7x7)
for (let i = -3; i <= 3; i++) {
for (let j = -3; j <= 3; j++) {
if (Math.abs(i) === 3 || Math.abs(j) === 3) {
this.setModule(x + i, y + j, true);
}
}
}
// 内部实心正方形 (5x5)
for (let i = -2; i <= 2; i++) {
for (let j = -2; j <= 2; j++) {
if (Math.abs(i) <= 2 && Math.abs(j) <= 2) {
this.setModule(x + i, y + j, true);
}
}
}
// 中心实心正方形 (3x3)
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (Math.abs(i) <= 1 && Math.abs(j) <= 1) {
this.setModule(x + i, y + j, true);
}
}
}
}
// 绘制时序图案（交替的黑白线）
drawTimingPatterns() {
const size = this.size;
// 水平时序图案
for (let x = 8; x < size - 8; x++) {
const isBlack = (x - 8) % 2 === 0;
this.setModule(x, 6, isBlack);
}
// 垂直时序图案
for (let y = 8; y < size - 8; y++) {
const isBlack = (y - 8) % 2 === 0;
this.setModule(6, y, isBlack);
}
}
// 绘制对齐图案
drawAlignmentPatterns() {
if (this.version < 2) return;
// 对齐图案位置（根据版本）
const alignmentPositions = [
[], [], [24], [26], [28], [30], [32], [34], [36], [38], [40]
];
const positions = alignmentPositions[this.version] || [30];
positions.forEach(pos => {
this.drawAlignmentPattern(pos, pos);
});
}
// 绘制单个对齐图案
drawAlignmentPattern(x, y) {
// 外框 (5x5)
for (let i = -2; i <= 2; i++) {
for (let j = -2; j <= 2; j++) {
if (Math.abs(i) === 2 || Math.abs(j) === 2) {
this.setModule(x + i, y + j, true);
}
}
}
// 中心实心点
this.setModule(x, y, true);
}
// 绘制格式信息
drawFormatInformation() {
// 格式信息（简化版）
const formatData = '1010100000100101011';
// 水平格式信息
for (let i = 0; i < 15; i++) {
if (i < 6 || (i > 8 && i < 15)) {
const x = i < 6 ? i : i + 1;
this.setModule(x, 8, formatData[i] === '1');
}
}
// 垂直格式信息
for (let i = 0; i < 15; i++) {
if (i < 6 || (i > 8 && i < 15)) {
const y = i < 6 ? i : i + 1;
this.setModule(8, y, formatData[i + 15] === '1');
}
}
}
// 绘制版本信息
drawVersionInformation() {
if (this.version < 7) return; // 版本7以下没有版本信息
// 版本信息（简化版）
const versionData = '111011111000100101001110011011011001010100011111011101';
// 水平版本信息
for (let i = 0; i < 18; i++) {
const x = this.size - 11 + Math.floor(i / 3);
const y = i % 3 + 9;
this.setModule(x, y, versionData[i] === '1');
}
// 垂直版本信息
for (let i = 0; i < 18; i++) {
const x = i % 3 + 9;
const y = this.size - 11 + Math.floor(i / 3);
this.setModule(x, y, versionData[i + 18] === '1');
}
}
// 填充数据到二维码
fillData(data) {
let bitIndex = 0;
let direction = -1; // 填充方向：-1 向上，1 向下
let x = this.size - 1;
let y = this.size - 1;
// 从右下角开始填充，每次移动两列
while (x > 0) {
// 跳过时序图案列
if (x === 6) x--;
// 处理当前列对
for (let i = 0; i < 2; i++) {
// 处理当前列
for (let j = 0; j < this.size; j++) {
// 检查是否是数据区域（不是固定图案）
if (!this.isReserved(x - i, y)) {
if (bitIndex < data.length) {
this.setModule(x - i, y, data[bitIndex] === '1');
bitIndex++;
}
}
// 移动到下一行
y += direction;
if (y < 0 || y >= this.size) {
direction *= -1;
y += direction;
break;
}
}
}
x -= 2;
}
}
// 应用掩码
applyMask() {
// 使用掩码模式0
for (let y = 0; y < this.size; y++) {
for (let x = 0; x < this.size; x++) {
// 掩码0: (x + y) % 2 === 0 时反转
if (!this.isReserved(x, y) && (x + y) % 2 === 0) {
this.modules[y][x] = !this.modules[y][x];
}
}
}
}
// 设置模块状态（是否为黑色）
setModule(x, y, isBlack) {
// 检查坐标是否有效
if (x >= 0 && x < this.size && y >= 0 && y < this.size) {
// 不覆盖保留区域
if (!this.isReserved(x, y)) {
this.modules[y][x] = isBlack;
}
}
}
// 检查是否为保留区域（固定图案）
isReserved(x, y) {
const size = this.size;
// 定位图案区域
const isInPositionPattern =
(x >= 0 && x < 7 && y >= 0 && y < 7) || // 左上角
(x >= size - 7 && x < size && y >= 0 && y < 7) || // 右上角
(x >= 0 && x < 7 && y >= size - 7 && y < size); // 左下角
// 时序图案区域
const isInTimingPattern = (x === 6 && y >= 7 && y < size - 7) ||
(y === 6 && x >= 7 && x < size - 7);
return isInPositionPattern || isInTimingPattern;
}
// 渲染二维码到DOM
render(containerId, moduleSize = 4) {
const container = document.getElementById(containerId);
container.innerHTML = '';
const qrElement = document.createElement('div');
qrElement.style.display = 'inline-block';
qrElement.style.lineHeight = '0';
for (let y = 0; y < this.size; y++) {
const row = document.createElement('div');
row.style.height = `${moduleSize}px`;
for (let x = 0; x < this.size; x++) {
const cell = document.createElement('div');
cell.className = `qr-cell ${this.modules[y][x] ? 'black' : ''}`;
cell.style.width = `${moduleSize}px`;
cell.style.height = `${moduleSize}px`;
row.appendChild(cell);
}
qrElement.appendChild(row);
}
container.appendChild(qrElement);
}
}
// 页面交互逻辑
document.addEventListener('DOMContentLoaded', () => {
const generateBtn = document.getElementById('generate-btn');
const contentInput = document.getElementById('qr-content');
const versionInput = document.getElementById('qr-version');
const moduleSizeInput = document.getElementById('qr-module-size');
const statusElement = document.getElementById('status');
// 生成二维码
generateBtn.addEventListener('click', () => {
try {
const content = contentInput.value.trim();
const version = parseInt(versionInput.value);
const moduleSize = parseInt(moduleSizeInput.value);
if (!content) {
statusElement.textContent = '请输入内容';
statusElement.className = 'error';
return;
}
statusElement.textContent = '正在生成二维码...';
statusElement.className = 'info';
// 创建并渲染二维码
const qrCode = new QRCode(content, version);
qrCode.render('qr-code', moduleSize);
statusElement.textContent = `二维码生成成功 (版本: ${version}, 大小: ${qrCode.size}x${qrCode.size})`;
statusElement.className = 'success';
} catch (error) {
statusElement.textContent = `生成失败: ${error.message}`;
statusElement.className = 'error';
console.error(error);
}
});
// 初始生成一个示例二维码
generateBtn.click();
});
</script>
</body>
</html>
一、二维码生成：金丹期技能的多面锻造
1. 信息加密与压缩的深度探索
二维码的生成过程，本质上是一场信息加密与压缩的奇妙旅程。在原生实现中，开发者需亲自操刀将各种信息（文本、链接、数字等）转化为标准化的二进制图案。这一过程涉及诸多关键步骤：
- 字符编码转换：利用
charCodeAt()等方法将字符精准转化为二进制字符串，为信息的数字化表示奠定基础。 - 模式指示符添加：通过添加模式指示符，清晰区分不同类型的信息，如文本、链接等，确保信息在解码时能被正确识别。
- 终止符与填充字节补充：为保证信息的完整性和规范性，需合理补充终止符与填充字节。这不仅体现了对信息边界的精确控制，更蕴含着数据压缩与加密的巧妙构思。
- 错误修正码运用：引入错误修正码，如通过
errorCorrectionLevel设置不同的容错级别（L、M、Q、H），使二维码在部分遮挡的情况下仍能准确解码。这种以冗余数据换取可靠性的策略，深刻反映了信息加密与容错处理的紧密联系。
对金丹期开发者来说，这一系列操作是理解信息在有限空间内高效、安全传递的关键，它将抽象的加密算法理论转化为实实在在的编码实践，为处理复杂数据安全与传输问题提供了宝贵经验。
2. 算法与几何逻辑的精妙融合
二维码的生成是算法与几何逻辑交织的艺术结晶。
- 版本与尺寸关联算法：版本与尺寸的对应关系是其中的基础算法。从版本 1 的 21×21 模块，到每提升一个版本模块数增加 4，这种精确的映射关系要求开发者具备敏锐的数学感知和算法实现能力。
- 固定图案几何绘制：定位图案、时序图案和对齐图案的绘制是对几何逻辑的深度考验。以定位图案为例，通过在特定坐标位置利用循环控制绘制外框、内部正方形和中心实心点，精确构建出三个角上的定位标识。这需要开发者熟练掌握坐标计算和循环嵌套逻辑，将算法思维具象化到二维平面的几何图形绘制中。
- 数据填充蛇形算法：
fillData方法中采用的蛇形填充逻辑，是算法在二维空间应用的经典案例。通过巧妙设置direction变量控制填充方向，结合x和y坐标的变化，实现数据在二维码模块中的有序填充。这种空间遍历算法与迷宫寻路、矩阵遍历等经典算法异曲同工，培养了开发者在复杂空间结构中处理数据的能力。
通过参与二维码生成过程中的这些算法与几何操作，金丹期开发者能够强化算法设计与几何布局的协同思维，为解决更复杂的空间数据处理问题积累经验。
3. 模块化与工程化思维的实践锤炼
纯原生二维码生成代码结构，如 QRCode 类的封装，为金丹期开发者提供了模块化与工程化思维的绝佳实践平台。
- 单一职责原则贯彻：将二维码生成过程拆分为
encodeData（信息编码）、generate（总控生成）、render（DOM 渲染）等独立方法，每个方法专注于单一功能，清晰体现了单一职责原则。这种模块化设计不仅提高了代码的可读性和维护性，更有助于开发者在大型项目中合理划分功能模块，提升系统架构的合理性。 - 参数化配置设计：对版本、容错率、模块大小等关键参数的设计，培养了开发者将需求参数化的能力。通过灵活调整这些参数，二维码能够适应不同的应用场景，如不同精度要求的扫码环境或不同显示设备的分辨率。这种工程化思维的训练，使开发者能够构建更加通用、灵活的软件系统，满足多样化的用户需求。
二、初学者入门：迈向金丹期的阶梯
对于编程初学者而言，虽然金丹期看似遥远，但通过逐步深入的学习方法，也能踏上这条充满挑战与机遇的进阶之路。
1. 拆解流程，搭建全局认知框架
将二维码生成过程拆解为 “信息编码→模块布局→图案渲染” 三个核心环节，以此搭建对整个生成过程的全局认知框架。
- 信息编码环节：重点关注
encodeData方法，理解如何将输入的文本信息逐步转化为符合二维码规范的二进制数据。通过打印中间变量，如字符转换后的二进制字符串、添加模式指示符和终止符后的完整二进制序列等，直观感受信息在编码过程中的变化，初步建立信息数字化处理的思维。 - 模块布局环节：聚焦固定图案的绘制方法，如
drawPositionDetectionPatterns和drawAlignmentPatterns。通过注释掉部分绘制代码，观察二维码图案的变化，理解定位图案、对齐图案等在二维码结构中的关键作用，以及它们是如何通过坐标计算和循环逻辑在二维平面上精确呈现的。 - 图案渲染环节：深入研究
render方法，了解如何利用 HTML 和 CSS 通过div元素模拟二维码的黑白模块，并控制其大小和样式。这一环节能够让初学者快速看到代码运行的可视化结果，增强学习的成就感和积极性。
2. 聚焦核心，突破关键技术卡点
在建立全局认知后，初学者需要聚焦算法与几何逻辑这两个关键技术卡点，进行深入学习和实践。
- 算法逻辑突破：以数据填充的蛇形算法为突破口，仔细分析
fillData方法中direction变量如何控制填充方向，以及x和y坐标在不同条件下的变化规律。可以通过绘制坐标变化图或添加调试日志，深入理解数据在二维空间中是如何按照特定算法有序填充的，从而掌握复杂算法在实际场景中的应用。 - 几何逻辑掌握：在固定图案绘制方面，以定位图案为例，详细剖析
drawPositionPattern(x, y)方法中从外框到内部正方形再到中心实心点的循环绘制逻辑。理解如何通过循环嵌套和坐标偏移精确控制几何图形的形状和位置，进而掌握利用代码在二维平面上构建复杂几何结构的方法。
3. 小步改造，实现从模仿到创新的转变
掌握核心技术后，初学者可以通过小步改造代码，逐步实现从模仿到创新的转变，进一步巩固所学知识，并为迈向金丹期积累经验。
- 参数调整实验：尝试修改二维码生成的关键参数，如
errorCorrectionLevel、version和moduleSize。观察不同参数设置下二维码图案的变化，以及对扫码精度和可读性的影响。通过这种实验，深入理解各个参数在二维码生成过程中的作用和相互关系，培养对技术细节的敏感度。 - 功能拓展实践：添加自定义功能，如改变二维码的颜色、添加 logo 嵌入等。以改变颜色为例，在
render方法中修改black类的背景色样式，将二维码的黑色模块替换为其他颜色。这不仅锻炼了对代码的修改能力，还能培养创新思维和解决实际问题的能力。 - 场景应用创新：将生成的二维码应用到不同的实际场景中，如生成包含个人信息的名片二维码、用于文件加密传输的二维码等。通过将技术与实际需求相结合，深入体会二维码在不同场景下的应用价值，为未来开发更具创新性和实用性的项目奠定基础。
三、金丹期的进阶之路：纯原生实现的深远意义
对于追求金丹期境界的开发者来说，纯原生实现二维码生成不仅仅是掌握一项技术，更是深入探索编程本质、触摸技术底层逻辑的过程。与使用第三方库快速生成二维码不同，原生实现要求开发者亲自参与每一个细节，从信息的编码转换到图案的绘制渲染，都需要精确把控。
这种深度参与让开发者能够清晰看到信息从原始字符串逐步转化为可识别二维码图案的全过程，打破对技术黑箱的神秘感，培养对复杂系统的拆解和分析能力。在面对更复杂的编程任务时，他们能够凭借在二维码生成过程中积累的加密、算法和工程化思维，迅速理解问题本质，设计出高效、稳健的解决方案。
总之，纯原生二维码生成作为金丹期必备技能，不仅是对编程能力的一次全面提升，更是通往更高编程境界的关键阶梯。通过不断磨砺这一技能，开发者能够在编程的修仙之路上稳步迈进，解锁更多的技术奥秘和创新可能。
阿雪技术观
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者。无论是分享代码、撰写技术博客，还是参与开源项目维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基生命，为科技进步添砖加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology.