upload project source code
This commit is contained in:
16
前端源码/uni-app/uni_modules/w-qrcode/changelog.md
Normal file
16
前端源码/uni-app/uni_modules/w-qrcode/changelog.md
Normal file
@@ -0,0 +1,16 @@
|
||||
## 1.0.1(2025-12-30)
|
||||
## 1.0.1(2025-12-30)
|
||||
- 优化二维码生成逻辑
|
||||
## 1.0.0(2025-12-29)
|
||||
- 初始版本发布
|
||||
- 纯 JavaScript 实现二维码生成算法
|
||||
- 支持 Vue2 和 Vue3
|
||||
- 支持自定义前景色、背景色
|
||||
- 支持添加 Logo 图片
|
||||
- 支持多种纠错级别(L/M/Q/H)
|
||||
- 支持保存到相册
|
||||
- 支持导出临时文件和 Base64
|
||||
- 兼容全平台:H5、App、各类小程序
|
||||
|
||||
## 1.0.1(2025-12-30)
|
||||
- 优化二维码生成逻辑
|
||||
619
前端源码/uni-app/uni_modules/w-qrcode/js_sdk/qrcode.js
Normal file
619
前端源码/uni-app/uni_modules/w-qrcode/js_sdk/qrcode.js
Normal file
@@ -0,0 +1,619 @@
|
||||
/**
|
||||
* QRCode Generator - 纯JavaScript实现
|
||||
* 基于 ISO/IEC 18004 标准
|
||||
* @version 2.0.0
|
||||
*/
|
||||
|
||||
// 纠错级别 - 使用标准索引
|
||||
const ECL = { L: 0, M: 1, Q: 2, H: 3 };
|
||||
|
||||
// 模式指示符
|
||||
const MODE = {
|
||||
Numeric: 0b0001,
|
||||
Alphanumeric: 0b0010,
|
||||
Byte: 0b0100,
|
||||
Kanji: 0b1000
|
||||
};
|
||||
|
||||
// 字母数字字符映射
|
||||
const ALPHANUM = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:';
|
||||
|
||||
// 各版本各纠错级别的数据容量(字节模式)
|
||||
const CAPACITIES = [
|
||||
[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],
|
||||
[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],
|
||||
[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],
|
||||
[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],
|
||||
[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],
|
||||
[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],
|
||||
[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],
|
||||
[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]
|
||||
];
|
||||
|
||||
// RS块信息表 [总码字, [各纠错级别的纠错码字数], [各纠错级别的块数(组1,组2)]]
|
||||
const RS_BLOCKS = [
|
||||
[[26,[7,10,13,17],[[1,0],[1,0],[1,0],[1,0]]]],
|
||||
[[44,[10,16,22,28],[[1,0],[1,0],[1,0],[1,0]]]],
|
||||
[[70,[15,26,18,22],[[1,0],[1,0],[2,0],[2,0]]]],
|
||||
[[100,[20,18,26,16],[[1,0],[2,0],[2,0],[4,0]]]],
|
||||
[[134,[26,24,18,22],[[1,0],[2,0],[4,0],[4,0]]]],
|
||||
[[172,[18,16,24,28],[[2,0],[4,0],[4,0],[4,0]]]],
|
||||
[[196,[20,18,18,26],[[2,0],[4,0],[6,0],[5,0]]]],
|
||||
[[242,[24,22,22,26],[[2,0],[4,0],[6,0],[6,0]]]],
|
||||
[[292,[30,22,20,24],[[2,0],[5,0],[8,0],[8,0]]]],
|
||||
[[346,[18,26,24,28],[[4,0],[5,0],[8,0],[8,0]]]],
|
||||
[[404,[20,30,28,24],[[4,0],[5,0],[8,0],[11,0]]]],
|
||||
[[466,[24,22,26,28],[[4,0],[8,0],[10,0],[11,0]]]],
|
||||
[[532,[26,22,24,22],[[4,0],[9,0],[12,0],[16,0]]]],
|
||||
[[581,[30,24,20,24],[[4,0],[9,0],[16,0],[16,0]]]],
|
||||
[[655,[22,24,30,24],[[6,0],[10,0],[12,0],[18,0]]]],
|
||||
[[733,[24,28,24,30],[[6,0],[10,0],[17,0],[16,0]]]],
|
||||
[[815,[28,28,28,28],[[6,0],[11,0],[16,0],[19,0]]]],
|
||||
[[901,[30,26,28,28],[[6,0],[13,0],[18,0],[21,0]]]],
|
||||
[[991,[28,26,26,26],[[7,0],[14,0],[21,0],[25,0]]]],
|
||||
[[1085,[28,26,30,28],[[8,0],[16,0],[20,0],[25,0]]]],
|
||||
[[1156,[28,26,28,30],[[8,0],[17,0],[23,0],[25,0]]]],
|
||||
[[1258,[28,28,30,24],[[9,0],[17,0],[23,0],[34,0]]]],
|
||||
[[1364,[30,28,30,30],[[9,0],[18,0],[25,0],[30,0]]]],
|
||||
[[1474,[30,28,30,30],[[10,0],[20,0],[27,0],[32,0]]]],
|
||||
[[1588,[26,28,30,30],[[12,0],[21,0],[29,0],[35,0]]]],
|
||||
[[1706,[28,28,28,30],[[12,0],[23,0],[34,0],[37,0]]]],
|
||||
[[1828,[30,28,30,30],[[12,0],[25,0],[34,0],[40,0]]]],
|
||||
[[1921,[30,28,30,30],[[13,0],[26,0],[35,0],[42,0]]]],
|
||||
[[2051,[30,28,30,30],[[14,0],[28,0],[38,0],[45,0]]]],
|
||||
[[2185,[30,28,30,30],[[15,0],[29,0],[40,0],[48,0]]]],
|
||||
[[2323,[30,28,30,30],[[16,0],[31,0],[43,0],[51,0]]]],
|
||||
[[2465,[30,28,30,30],[[17,0],[33,0],[45,0],[54,0]]]],
|
||||
[[2611,[30,28,30,30],[[18,0],[35,0],[48,0],[57,0]]]],
|
||||
[[2761,[30,28,30,30],[[19,0],[37,0],[51,0],[60,0]]]],
|
||||
[[2876,[30,28,30,30],[[19,0],[38,0],[53,0],[63,0]]]],
|
||||
[[3034,[30,28,30,30],[[20,0],[40,0],[56,0],[66,0]]]],
|
||||
[[3196,[30,28,30,30],[[21,0],[43,0],[59,0],[70,0]]]],
|
||||
[[3362,[30,28,30,30],[[22,0],[45,0],[62,0],[74,0]]]],
|
||||
[[3532,[30,28,30,30],[[24,0],[47,0],[65,0],[77,0]]]],
|
||||
[[3706,[30,28,30,30],[[25,0],[49,0],[68,0],[81,0]]]]
|
||||
];
|
||||
|
||||
// 更完整的RS块信息
|
||||
const EC_PARAMS = [
|
||||
// [纠错码字每块, 数据码字每块组1, 块数组1, 数据码字每块组2, 块数组2]
|
||||
// L, M, Q, H for each version
|
||||
[[7,19,1,0,0],[10,16,1,0,0],[13,13,1,0,0],[17,9,1,0,0]], // v1
|
||||
[[10,34,1,0,0],[16,28,1,0,0],[22,22,1,0,0],[28,16,1,0,0]], // v2
|
||||
[[15,55,1,0,0],[26,44,1,0,0],[18,17,2,0,0],[22,13,2,0,0]], // v3
|
||||
[[20,80,1,0,0],[18,32,2,0,0],[26,24,2,0,0],[16,9,4,0,0]], // v4
|
||||
[[26,108,1,0,0],[24,43,2,0,0],[18,15,2,16,2],[22,11,2,12,2]], // v5
|
||||
[[18,68,2,0,0],[16,27,4,0,0],[24,19,4,0,0],[28,15,4,0,0]], // v6
|
||||
[[20,78,2,0,0],[18,31,4,0,0],[18,14,2,15,4],[26,13,4,14,1]], // v7
|
||||
[[24,97,2,0,0],[22,38,2,39,2],[22,18,4,19,2],[26,14,4,15,2]], // v8
|
||||
[[30,116,2,0,0],[22,36,3,37,2],[20,16,4,17,4],[24,12,4,13,4]], // v9
|
||||
[[18,68,2,69,2],[26,43,4,44,1],[24,19,6,20,2],[28,15,6,16,2]], // v10
|
||||
[[20,81,4,0,0],[30,50,1,51,4],[28,22,4,23,4],[24,12,3,13,8]], // v11
|
||||
[[24,92,2,93,2],[22,36,6,37,2],[26,20,4,21,6],[28,14,7,15,4]], // v12
|
||||
[[26,107,4,0,0],[22,37,8,38,1],[24,20,8,21,4],[22,11,12,12,4]], // v13
|
||||
[[30,115,3,116,1],[24,40,4,41,5],[20,16,11,17,5],[24,12,11,13,5]], // v14
|
||||
[[22,87,5,88,1],[24,41,5,42,5],[30,24,5,25,7],[24,12,11,13,7]], // v15
|
||||
[[24,98,5,99,1],[28,45,7,46,3],[24,19,15,20,2],[30,15,3,16,13]], // v16
|
||||
[[28,107,1,108,5],[28,46,10,47,1],[28,22,1,23,15],[28,14,2,15,17]], // v17
|
||||
[[30,120,5,121,1],[26,43,9,44,4],[28,22,17,23,1],[28,14,2,15,19]], // v18
|
||||
[[28,113,3,114,4],[26,44,3,45,11],[26,21,17,22,4],[26,13,9,14,16]], // v19
|
||||
[[28,107,3,108,5],[26,41,3,42,13],[30,24,15,25,5],[28,15,15,16,10]], // v20
|
||||
[[28,116,4,117,4],[26,42,17,0,0],[28,22,17,23,6],[30,16,19,17,6]], // v21
|
||||
[[28,111,2,112,7],[28,46,17,0,0],[30,24,7,25,16],[24,13,34,0,0]], // v22
|
||||
[[30,121,4,122,5],[28,47,4,48,14],[30,24,11,25,14],[30,15,16,16,14]], // v23
|
||||
[[30,117,6,118,4],[28,45,6,46,14],[30,24,11,25,16],[30,16,30,17,2]], // v24
|
||||
[[26,106,8,107,4],[28,47,8,48,13],[30,24,7,25,22],[30,15,22,16,13]], // v25
|
||||
[[28,114,10,115,2],[28,46,19,47,4],[28,22,28,23,6],[30,16,33,17,4]], // v26
|
||||
[[30,122,8,123,4],[28,45,22,46,3],[30,23,8,24,26],[30,15,12,16,28]], // v27
|
||||
[[30,117,3,118,10],[28,45,3,46,23],[30,24,4,25,31],[30,15,11,16,31]], // v28
|
||||
[[30,116,7,117,7],[28,45,21,46,7],[30,23,1,24,37],[30,15,19,16,26]], // v29
|
||||
[[30,115,5,116,10],[28,47,19,48,10],[30,24,15,25,25],[30,15,23,16,25]], // v30
|
||||
[[30,115,13,116,3],[28,46,2,47,29],[30,24,42,25,1],[30,15,23,16,28]], // v31
|
||||
[[30,115,17,0,0],[28,46,10,47,23],[30,24,10,25,35],[30,15,19,16,35]], // v32
|
||||
[[30,115,17,116,1],[28,46,14,47,21],[30,24,29,25,19],[30,15,11,16,46]], // v33
|
||||
[[30,115,13,116,6],[28,46,14,47,23],[30,24,44,25,7],[30,16,59,17,1]], // v34
|
||||
[[30,121,12,122,7],[28,47,12,48,26],[30,24,39,25,14],[30,15,22,16,41]], // v35
|
||||
[[30,121,6,122,14],[28,47,6,48,34],[30,24,46,25,10],[30,15,2,16,64]], // v36
|
||||
[[30,122,17,123,4],[28,46,29,47,14],[30,24,49,25,10],[30,15,24,16,46]], // v37
|
||||
[[30,122,4,123,18],[28,46,13,47,32],[30,24,48,25,14],[30,15,42,16,32]], // v38
|
||||
[[30,117,20,118,4],[28,47,40,48,7],[30,24,43,25,22],[30,15,10,16,67]], // v39
|
||||
[[30,118,19,119,6],[28,47,18,48,31],[30,24,34,25,34],[30,15,20,16,61]] // v40
|
||||
];
|
||||
|
||||
// 对齐图案位置
|
||||
const ALIGN_POS = [
|
||||
[], [6,18], [6,22], [6,26], [6,30], [6,34],
|
||||
[6,22,38], [6,24,42], [6,26,46], [6,28,50], [6,30,54], [6,32,58], [6,34,62],
|
||||
[6,26,46,66], [6,26,48,70], [6,26,50,74], [6,30,54,78], [6,30,56,82], [6,30,58,86], [6,34,62,90],
|
||||
[6,28,50,72,94], [6,26,50,74,98], [6,30,54,78,102], [6,28,54,80,106], [6,32,58,84,110],
|
||||
[6,30,58,86,114], [6,34,62,90,118], [6,26,50,74,98,122], [6,30,54,78,102,126],
|
||||
[6,26,52,78,104,130], [6,30,56,82,108,134], [6,34,60,86,112,138], [6,30,58,86,114,142],
|
||||
[6,34,62,90,118,146], [6,30,54,78,102,126,150], [6,24,50,76,102,128,154],
|
||||
[6,28,54,80,106,132,158], [6,32,58,84,110,136,162], [6,26,54,82,110,138,166], [6,30,58,86,114,142,170]
|
||||
];
|
||||
|
||||
// 格式信息预计算 (ecl*8+mask) -> formatBits
|
||||
const FORMAT_BITS = [
|
||||
0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976,
|
||||
0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0,
|
||||
0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed,
|
||||
0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b
|
||||
];
|
||||
|
||||
// 版本信息 (版本7+)
|
||||
const VERSION_BITS = [
|
||||
0x07c94, 0x085bc, 0x09a99, 0x0a4d3, 0x0bbf6, 0x0c762, 0x0d847, 0x0e60d,
|
||||
0x0f928, 0x10b78, 0x1145d, 0x12a17, 0x13532, 0x149a6, 0x15683, 0x168c9,
|
||||
0x177ec, 0x18ec4, 0x191e1, 0x1afab, 0x1b08e, 0x1cc1a, 0x1d33f, 0x1ed75,
|
||||
0x1f250, 0x209d5, 0x216f0, 0x228ba, 0x2379f, 0x24b0b, 0x2542e, 0x26a64,
|
||||
0x27541, 0x28c69
|
||||
];
|
||||
|
||||
// GF(2^8) 运算表
|
||||
const EXP = new Uint8Array(512);
|
||||
const LOG = new Uint8Array(256);
|
||||
(() => {
|
||||
let x = 1;
|
||||
for (let i = 0; i < 255; i++) {
|
||||
EXP[i] = x;
|
||||
LOG[x] = i;
|
||||
x = (x << 1) ^ (x >= 128 ? 0x11d : 0);
|
||||
}
|
||||
for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255];
|
||||
})();
|
||||
|
||||
// RS编码
|
||||
function rsEncode(data, ecLen) {
|
||||
const gen = new Uint8Array(ecLen + 1);
|
||||
gen[0] = 1;
|
||||
for (let i = 0; i < ecLen; i++) {
|
||||
for (let j = i + 1; j >= 1; j--) {
|
||||
gen[j] = gen[j] ? EXP[LOG[gen[j]] + i] ^ gen[j-1] : gen[j-1];
|
||||
}
|
||||
gen[0] = EXP[LOG[gen[0]] + i];
|
||||
}
|
||||
|
||||
const result = new Uint8Array(ecLen);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const coef = data[i] ^ result[0];
|
||||
result.copyWithin(0, 1);
|
||||
result[ecLen - 1] = 0;
|
||||
if (coef) {
|
||||
for (let j = 0; j < ecLen; j++) {
|
||||
result[j] ^= EXP[LOG[gen[ecLen - 1 - j]] + LOG[coef]];
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// 获取数据模式
|
||||
function getMode(text) {
|
||||
if (/^\d+$/.test(text)) return MODE.Numeric;
|
||||
if (/^[0-9A-Z $%*+\-./:]+$/.test(text)) return MODE.Alphanumeric;
|
||||
return MODE.Byte;
|
||||
}
|
||||
|
||||
// 获取字符计数位数
|
||||
function getCharCountBits(ver, mode) {
|
||||
const idx = ver < 10 ? 0 : ver < 27 ? 1 : 2;
|
||||
return [[10,9,8,8],[12,11,16,10],[14,13,16,12]][idx][[MODE.Numeric,MODE.Alphanumeric,MODE.Byte,MODE.Kanji].indexOf(mode)];
|
||||
}
|
||||
|
||||
// UTF-8编码
|
||||
function toUtf8(str) {
|
||||
const bytes = [];
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
let c = str.charCodeAt(i);
|
||||
if (c < 0x80) {
|
||||
bytes.push(c);
|
||||
} else if (c < 0x800) {
|
||||
bytes.push(0xc0 | (c >> 6), 0x80 | (c & 0x3f));
|
||||
} else if (c >= 0xd800 && c < 0xdc00 && i + 1 < str.length) {
|
||||
const c2 = str.charCodeAt(++i);
|
||||
c = 0x10000 + ((c & 0x3ff) << 10) + (c2 & 0x3ff);
|
||||
bytes.push(0xf0 | (c >> 18), 0x80 | ((c >> 12) & 0x3f), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
|
||||
} else {
|
||||
bytes.push(0xe0 | (c >> 12), 0x80 | ((c >> 6) & 0x3f), 0x80 | (c & 0x3f));
|
||||
}
|
||||
}
|
||||
return bytes;
|
||||
}
|
||||
|
||||
// 获取最小版本
|
||||
function getMinVersion(text, ecl) {
|
||||
const mode = getMode(text);
|
||||
const len = mode === MODE.Byte ? toUtf8(text).length : text.length;
|
||||
for (let v = 1; v <= 40; v++) {
|
||||
if (len <= CAPACITIES[v-1][ecl]) return v;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
// 编码数据
|
||||
function encodeData(text, ver, ecl) {
|
||||
const mode = getMode(text);
|
||||
const bits = [];
|
||||
|
||||
// 写入位
|
||||
const write = (val, len) => {
|
||||
for (let i = len - 1; i >= 0; i--) bits.push((val >> i) & 1);
|
||||
};
|
||||
|
||||
// 模式指示符
|
||||
write(mode, 4);
|
||||
|
||||
// 字符计数
|
||||
const utf8 = mode === MODE.Byte ? toUtf8(text) : null;
|
||||
const charCount = utf8 ? utf8.length : text.length;
|
||||
write(charCount, getCharCountBits(ver, mode));
|
||||
|
||||
// 数据编码
|
||||
if (mode === MODE.Numeric) {
|
||||
for (let i = 0; i < text.length; i += 3) {
|
||||
const chunk = text.substr(i, 3);
|
||||
write(parseInt(chunk, 10), chunk.length * 3 + 1);
|
||||
}
|
||||
} else if (mode === MODE.Alphanumeric) {
|
||||
for (let i = 0; i < text.length; i += 2) {
|
||||
if (i + 1 < text.length) {
|
||||
write(ALPHANUM.indexOf(text[i]) * 45 + ALPHANUM.indexOf(text[i+1]), 11);
|
||||
} else {
|
||||
write(ALPHANUM.indexOf(text[i]), 6);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (const b of utf8) write(b, 8);
|
||||
}
|
||||
|
||||
// 获取数据容量
|
||||
const params = EC_PARAMS[ver - 1][ecl];
|
||||
const [ecPerBlock, dc1, bc1, dc2, bc2] = params;
|
||||
const totalDC = dc1 * bc1 + dc2 * bc2;
|
||||
const capacity = totalDC * 8;
|
||||
|
||||
// 终止符
|
||||
const termLen = Math.min(4, capacity - bits.length);
|
||||
for (let i = 0; i < termLen; i++) bits.push(0);
|
||||
|
||||
// 对齐到字节
|
||||
while (bits.length % 8) bits.push(0);
|
||||
|
||||
// 填充
|
||||
const pads = [0xec, 0x11];
|
||||
let padIdx = 0;
|
||||
while (bits.length < capacity) {
|
||||
write(pads[padIdx++ % 2], 8);
|
||||
}
|
||||
|
||||
// 转换为字节
|
||||
const bytes = [];
|
||||
for (let i = 0; i < bits.length; i += 8) {
|
||||
let b = 0;
|
||||
for (let j = 0; j < 8; j++) b = (b << 1) | bits[i + j];
|
||||
bytes.push(b);
|
||||
}
|
||||
|
||||
// 分块并添加纠错码
|
||||
const blocks = [];
|
||||
const ecBlocks = [];
|
||||
let offset = 0;
|
||||
|
||||
for (let i = 0; i < bc1; i++) {
|
||||
const block = bytes.slice(offset, offset + dc1);
|
||||
blocks.push(block);
|
||||
ecBlocks.push(rsEncode(new Uint8Array(block), ecPerBlock));
|
||||
offset += dc1;
|
||||
}
|
||||
for (let i = 0; i < bc2; i++) {
|
||||
const block = bytes.slice(offset, offset + dc2);
|
||||
blocks.push(block);
|
||||
ecBlocks.push(rsEncode(new Uint8Array(block), ecPerBlock));
|
||||
offset += dc2;
|
||||
}
|
||||
|
||||
// 交织
|
||||
const result = [];
|
||||
const maxDC = Math.max(dc1, dc2);
|
||||
for (let i = 0; i < maxDC; i++) {
|
||||
for (const block of blocks) {
|
||||
if (i < block.length) result.push(block[i]);
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < ecPerBlock; i++) {
|
||||
for (const ec of ecBlocks) {
|
||||
result.push(ec[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 创建二维码矩阵
|
||||
function createMatrix(ver) {
|
||||
const size = ver * 4 + 17;
|
||||
const matrix = [];
|
||||
const reserved = [];
|
||||
for (let i = 0; i < size; i++) {
|
||||
matrix.push(new Array(size).fill(0));
|
||||
reserved.push(new Array(size).fill(false));
|
||||
}
|
||||
|
||||
// 标记保留区域
|
||||
const mark = (r, c) => {
|
||||
if (r >= 0 && r < size && c >= 0 && c < size) reserved[r][c] = true;
|
||||
};
|
||||
|
||||
// 查找图案
|
||||
const placeFinder = (r, c) => {
|
||||
for (let dr = -1; dr <= 7; dr++) {
|
||||
for (let dc = -1; dc <= 7; dc++) {
|
||||
const nr = r + dr, nc = c + dc;
|
||||
if (nr < 0 || nr >= size || nc < 0 || nc >= size) continue;
|
||||
mark(nr, nc);
|
||||
if (dr >= 0 && dr <= 6 && dc >= 0 && dc <= 6) {
|
||||
const isBlack = dr === 0 || dr === 6 || dc === 0 || dc === 6 ||
|
||||
(dr >= 2 && dr <= 4 && dc >= 2 && dc <= 4);
|
||||
matrix[nr][nc] = isBlack ? 1 : 0;
|
||||
} else {
|
||||
matrix[nr][nc] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
placeFinder(0, 0);
|
||||
placeFinder(0, size - 7);
|
||||
placeFinder(size - 7, 0);
|
||||
|
||||
// 对齐图案
|
||||
if (ver >= 2) {
|
||||
const positions = ALIGN_POS[ver - 1];
|
||||
for (const r of positions) {
|
||||
for (const c of positions) {
|
||||
if (reserved[r][c]) continue;
|
||||
for (let dr = -2; dr <= 2; dr++) {
|
||||
for (let dc = -2; dc <= 2; dc++) {
|
||||
mark(r + dr, c + dc);
|
||||
const isBlack = Math.abs(dr) === 2 || Math.abs(dc) === 2 || (dr === 0 && dc === 0);
|
||||
matrix[r + dr][c + dc] = isBlack ? 1 : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 时序图案
|
||||
for (let i = 8; i < size - 8; i++) {
|
||||
const v = i % 2 === 0 ? 1 : 0;
|
||||
if (!reserved[6][i]) { matrix[6][i] = v; mark(6, i); }
|
||||
if (!reserved[i][6]) { matrix[i][6] = v; mark(i, 6); }
|
||||
}
|
||||
|
||||
// 暗模块
|
||||
matrix[size - 8][8] = 1;
|
||||
mark(size - 8, 8);
|
||||
|
||||
// 格式信息区域
|
||||
for (let i = 0; i < 9; i++) { mark(8, i); mark(i, 8); }
|
||||
for (let i = 0; i < 8; i++) { mark(8, size - 1 - i); mark(size - 1 - i, 8); }
|
||||
|
||||
// 版本信息区域
|
||||
if (ver >= 7) {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
mark(i, size - 11 + j);
|
||||
mark(size - 11 + j, i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { matrix, reserved, size };
|
||||
}
|
||||
|
||||
// 放置数据
|
||||
function placeData(matrix, reserved, data) {
|
||||
const size = matrix.length;
|
||||
let bitIdx = 0;
|
||||
let upward = true;
|
||||
|
||||
for (let col = size - 1; col >= 1; col -= 2) {
|
||||
if (col === 6) col = 5;
|
||||
|
||||
for (let i = 0; i < size; i++) {
|
||||
const row = upward ? size - 1 - i : i;
|
||||
|
||||
for (let dc = 0; dc < 2; dc++) {
|
||||
const c = col - dc;
|
||||
if (!reserved[row][c]) {
|
||||
const bit = bitIdx < data.length * 8
|
||||
? (data[Math.floor(bitIdx / 8)] >> (7 - bitIdx % 8)) & 1
|
||||
: 0;
|
||||
matrix[row][c] = bit;
|
||||
bitIdx++;
|
||||
}
|
||||
}
|
||||
}
|
||||
upward = !upward;
|
||||
}
|
||||
}
|
||||
|
||||
// 应用掩码
|
||||
function applyMask(matrix, reserved, mask) {
|
||||
const size = matrix.length;
|
||||
const result = matrix.map(row => [...row]);
|
||||
|
||||
const masks = [
|
||||
(r, c) => (r + c) % 2 === 0,
|
||||
(r, c) => r % 2 === 0,
|
||||
(r, c) => c % 3 === 0,
|
||||
(r, c) => (r + c) % 3 === 0,
|
||||
(r, c) => (Math.floor(r / 2) + Math.floor(c / 3)) % 2 === 0,
|
||||
(r, c) => (r * c) % 2 + (r * c) % 3 === 0,
|
||||
(r, c) => ((r * c) % 2 + (r * c) % 3) % 2 === 0,
|
||||
(r, c) => ((r + c) % 2 + (r * c) % 3) % 2 === 0
|
||||
];
|
||||
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let c = 0; c < size; c++) {
|
||||
if (!reserved[r][c] && masks[mask](r, c)) {
|
||||
result[r][c] ^= 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// 放置格式信息
|
||||
function placeFormatInfo(matrix, ecl, mask) {
|
||||
const size = matrix.length;
|
||||
const bits = FORMAT_BITS[ecl * 8 + mask];
|
||||
|
||||
// 左上水平
|
||||
for (let i = 0; i <= 5; i++) matrix[8][i] = (bits >> (14 - i)) & 1;
|
||||
matrix[8][7] = (bits >> 8) & 1;
|
||||
matrix[8][8] = (bits >> 7) & 1;
|
||||
matrix[7][8] = (bits >> 6) & 1;
|
||||
for (let i = 0; i <= 5; i++) matrix[i][8] = (bits >> i) & 1;
|
||||
|
||||
// 右上和左下
|
||||
for (let i = 0; i <= 7; i++) matrix[8][size - 1 - i] = (bits >> i) & 1;
|
||||
for (let i = 0; i <= 6; i++) matrix[size - 1 - i][8] = (bits >> (14 - i)) & 1;
|
||||
}
|
||||
|
||||
// 放置版本信息
|
||||
function placeVersionInfo(matrix, ver) {
|
||||
if (ver < 7) return;
|
||||
const size = matrix.length;
|
||||
const bits = VERSION_BITS[ver - 7];
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
for (let j = 0; j < 3; j++) {
|
||||
const bit = (bits >> (i * 3 + j)) & 1;
|
||||
matrix[i][size - 11 + j] = bit;
|
||||
matrix[size - 11 + j][i] = bit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 计算惩罚分数
|
||||
function calcPenalty(matrix) {
|
||||
const size = matrix.length;
|
||||
let penalty = 0;
|
||||
|
||||
// 规则1: 连续同色
|
||||
for (let r = 0; r < size; r++) {
|
||||
let cnt = 1;
|
||||
for (let c = 1; c < size; c++) {
|
||||
if (matrix[r][c] === matrix[r][c-1]) cnt++;
|
||||
else { if (cnt >= 5) penalty += cnt - 2; cnt = 1; }
|
||||
}
|
||||
if (cnt >= 5) penalty += cnt - 2;
|
||||
}
|
||||
for (let c = 0; c < size; c++) {
|
||||
let cnt = 1;
|
||||
for (let r = 1; r < size; r++) {
|
||||
if (matrix[r][c] === matrix[r-1][c]) cnt++;
|
||||
else { if (cnt >= 5) penalty += cnt - 2; cnt = 1; }
|
||||
}
|
||||
if (cnt >= 5) penalty += cnt - 2;
|
||||
}
|
||||
|
||||
// 规则2: 2x2块
|
||||
for (let r = 0; r < size - 1; r++) {
|
||||
for (let c = 0; c < size - 1; c++) {
|
||||
const v = matrix[r][c];
|
||||
if (v === matrix[r][c+1] && v === matrix[r+1][c] && v === matrix[r+1][c+1]) {
|
||||
penalty += 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 规则3: 特定图案
|
||||
const p1 = [1,0,1,1,1,0,1,0,0,0,0];
|
||||
const p2 = [0,0,0,0,1,0,1,1,1,0,1];
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let c = 0; c <= size - 11; c++) {
|
||||
let m1 = true, m2 = true;
|
||||
for (let i = 0; i < 11; i++) {
|
||||
if (matrix[r][c+i] !== p1[i]) m1 = false;
|
||||
if (matrix[r][c+i] !== p2[i]) m2 = false;
|
||||
}
|
||||
if (m1 || m2) penalty += 40;
|
||||
}
|
||||
}
|
||||
for (let c = 0; c < size; c++) {
|
||||
for (let r = 0; r <= size - 11; r++) {
|
||||
let m1 = true, m2 = true;
|
||||
for (let i = 0; i < 11; i++) {
|
||||
if (matrix[r+i][c] !== p1[i]) m1 = false;
|
||||
if (matrix[r+i][c] !== p2[i]) m2 = false;
|
||||
}
|
||||
if (m1 || m2) penalty += 40;
|
||||
}
|
||||
}
|
||||
|
||||
// 规则4: 黑白比例
|
||||
let dark = 0;
|
||||
for (let r = 0; r < size; r++) {
|
||||
for (let c = 0; c < size; c++) {
|
||||
if (matrix[r][c]) dark++;
|
||||
}
|
||||
}
|
||||
const ratio = dark / (size * size);
|
||||
penalty += Math.floor(Math.abs(ratio - 0.5) / 0.05) * 10;
|
||||
|
||||
return penalty;
|
||||
}
|
||||
|
||||
// 选择最佳掩码
|
||||
function selectMask(matrix, reserved, ecl, ver) {
|
||||
let bestMask = 0;
|
||||
let bestPenalty = Infinity;
|
||||
|
||||
for (let mask = 0; mask < 8; mask++) {
|
||||
const masked = applyMask(matrix, reserved, mask);
|
||||
placeFormatInfo(masked, ecl, mask);
|
||||
placeVersionInfo(masked, ver);
|
||||
const p = calcPenalty(masked);
|
||||
if (p < bestPenalty) {
|
||||
bestPenalty = p;
|
||||
bestMask = mask;
|
||||
}
|
||||
}
|
||||
|
||||
return bestMask;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成二维码
|
||||
*/
|
||||
function generate(text, options = {}) {
|
||||
const eclName = (options.errorCorrectionLevel || 'M').toUpperCase();
|
||||
const ecl = ECL[eclName] !== undefined ? ECL[eclName] : ECL.M;
|
||||
|
||||
let ver = options.version || getMinVersion(text, ecl);
|
||||
if (ver < 1) throw new Error('数据过长');
|
||||
if (ver > 40) ver = 40;
|
||||
|
||||
const data = encodeData(text, ver, ecl);
|
||||
const { matrix, reserved, size } = createMatrix(ver);
|
||||
|
||||
placeData(matrix, reserved, data);
|
||||
|
||||
const mask = selectMask(matrix, reserved, ecl, ver);
|
||||
const final = applyMask(matrix, reserved, mask);
|
||||
placeFormatInfo(final, ecl, mask);
|
||||
placeVersionInfo(final, ver);
|
||||
|
||||
return {
|
||||
version: ver,
|
||||
size,
|
||||
modules: final,
|
||||
errorCorrectionLevel: eclName
|
||||
};
|
||||
}
|
||||
|
||||
export default { generate, ECL, MODE };
|
||||
export { generate, ECL, MODE };
|
||||
104
前端源码/uni-app/uni_modules/w-qrcode/package.json
Normal file
104
前端源码/uni-app/uni_modules/w-qrcode/package.json
Normal file
@@ -0,0 +1,104 @@
|
||||
{
|
||||
"id": "w-qrcode",
|
||||
"displayName": "w-qrcode 二维码生成器",
|
||||
"version": "1.0.1",
|
||||
"description": "高性能二维码生成组件,纯JavaScript实现,支持自定义样式、Logo、多种纠错级别,兼容Vue2/Vue3,支持全平台",
|
||||
"keywords": [
|
||||
"qrcode",
|
||||
"二维码",
|
||||
"qr-code",
|
||||
"vue2",
|
||||
"vue3"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0",
|
||||
"uni-app": "^3.6.15",
|
||||
"uni-app-x": ""
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "√",
|
||||
"aliyun": "√",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": {
|
||||
},
|
||||
"vue3": {
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "√",
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√",
|
||||
"alipay": "-",
|
||||
"toutiao": "-",
|
||||
"baidu": "-",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "-",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "-",
|
||||
"union": "-"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"main": "js_sdk/qrcode.js"
|
||||
}
|
||||
229
前端源码/uni-app/uni_modules/w-qrcode/readme.md
Normal file
229
前端源码/uni-app/uni_modules/w-qrcode/readme.md
Normal file
@@ -0,0 +1,229 @@
|
||||
# w-qrcode 二维码生成器
|
||||
|
||||
高性能二维码生成组件,纯 JavaScript 实现,无外部依赖。
|
||||
|
||||
## 特性
|
||||
|
||||
- 纯 JavaScript 实现,无需任何外部依赖
|
||||
- 支持 Vue2 和 Vue3
|
||||
- 支持全平台:H5、App(Vue/Nvue)、微信/支付宝/百度/字节跳动/QQ 等小程序
|
||||
- 支持自定义前景色、背景色
|
||||
- 支持添加 Logo 图片
|
||||
- 支持多种纠错级别(L/M/Q/H)
|
||||
- 支持保存到相册
|
||||
- 支持导出为图片
|
||||
|
||||
## 安装
|
||||
|
||||
将 `w-qrcode` 目录复制到项目的 `uni_modules` 目录下即可。
|
||||
|
||||
## 基本使用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<w-qrcode value="https://example.com" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## 完整示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 基础用法 -->
|
||||
<w-qrcode
|
||||
value="https://example.com"
|
||||
:size="200"
|
||||
/>
|
||||
|
||||
<!-- 自定义颜色 -->
|
||||
<w-qrcode
|
||||
value="https://example.com"
|
||||
:size="200"
|
||||
foreground="#1989fa"
|
||||
background="#f5f5f5"
|
||||
/>
|
||||
|
||||
<!-- 带 Logo -->
|
||||
<w-qrcode
|
||||
ref="qrcodeRef"
|
||||
value="https://example.com"
|
||||
:size="200"
|
||||
logo="/static/logo.png"
|
||||
:logo-size="50"
|
||||
:logo-radius="8"
|
||||
error-correction-level="H"
|
||||
@generated="onGenerated"
|
||||
@longpress="onLongpress"
|
||||
/>
|
||||
|
||||
<button @click="saveToAlbum">保存到相册</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onGenerated(info) {
|
||||
console.log('二维码生成成功:', info);
|
||||
// { version: 2, size: 25, errorCorrectionLevel: 'H' }
|
||||
},
|
||||
onLongpress(e) {
|
||||
console.log('长按事件');
|
||||
},
|
||||
saveToAlbum() {
|
||||
this.$refs.qrcodeRef.saveToAlbum()
|
||||
.then(res => {
|
||||
console.log('保存成功', res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('保存失败', err);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## Vue3 组合式 API 示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<w-qrcode
|
||||
ref="qrcodeRef"
|
||||
:value="qrValue"
|
||||
:size="200"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const qrcodeRef = ref(null);
|
||||
const qrValue = ref('https://example.com');
|
||||
|
||||
const saveToAlbum = () => {
|
||||
qrcodeRef.value.saveToAlbum();
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## Props 属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------|------|--------|------|
|
||||
| value | String | '' | 要编码的文本内容 |
|
||||
| size | Number/String | 200 | 二维码尺寸(单位:px) |
|
||||
| foreground | String | '#000000' | 前景色(二维码颜色) |
|
||||
| background | String | '#FFFFFF' | 背景色 |
|
||||
| errorCorrectionLevel | String | 'M' | 纠错级别,可选值:L/M/Q/H |
|
||||
| margin | Number/String | 2 | 二维码边距(单位:模块) |
|
||||
| logo | String | '' | Logo 图片路径 |
|
||||
| logoSize | Number/String | 50 | Logo 尺寸(单位:px) |
|
||||
| logoMargin | Number/String | 5 | Logo 外边距(单位:px) |
|
||||
| logoRadius | Number/String | 8 | Logo 圆角(单位:px) |
|
||||
| logoBackground | String | '#FFFFFF' | Logo 背景色 |
|
||||
| canvas2d | Boolean | true | 是否使用 Canvas 2D(仅小程序有效) |
|
||||
|
||||
## 纠错级别说明
|
||||
|
||||
| 级别 | 纠错能力 | 说明 |
|
||||
|------|----------|------|
|
||||
| L | 约 7% | 数据恢复能力最低 |
|
||||
| M | 约 15% | 默认级别,平衡 |
|
||||
| Q | 约 25% | 较高的数据恢复能力 |
|
||||
| H | 约 30% | 最高级别,适合添加 Logo |
|
||||
|
||||
> 注意:如果需要在二维码中添加 Logo,建议使用 `H` 级别,以保证扫描成功率。
|
||||
|
||||
## Events 事件
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|--------|------|----------|
|
||||
| generated | 二维码生成成功时触发 | { version, size, errorCorrectionLevel } |
|
||||
| error | 生成失败时触发 | Error 对象 |
|
||||
| longpress | 长按二维码时触发 | Event 对象 |
|
||||
|
||||
## Methods 方法
|
||||
|
||||
通过 ref 获取组件实例后调用:
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|--------|------|------|--------|
|
||||
| saveToAlbum | 保存到相册 | - | Promise |
|
||||
| toTempFilePath | 获取临时文件路径 | options | Promise<{tempFilePath}> |
|
||||
| toDataURL | 获取 Base64(仅 H5) | type, quality | Promise<string> |
|
||||
| generate | 重新生成二维码 | - | - |
|
||||
|
||||
### toTempFilePath 参数
|
||||
|
||||
```javascript
|
||||
this.$refs.qrcodeRef.toTempFilePath({
|
||||
fileType: 'png', // 'jpg' | 'png'
|
||||
quality: 1, // 0-1,jpg 时有效
|
||||
destWidth: 300, // 输出图片宽度
|
||||
destHeight: 300 // 输出图片高度
|
||||
});
|
||||
```
|
||||
|
||||
## 直接使用 JS SDK
|
||||
|
||||
如果只需要生成二维码数据,可以直接使用 JS SDK:
|
||||
|
||||
```javascript
|
||||
import QRCode from '@/uni_modules/w-qrcode/js_sdk/qrcode.js';
|
||||
|
||||
// 生成二维码数据
|
||||
const result = QRCode.generate('https://example.com', {
|
||||
errorCorrectionLevel: 'M' // L/M/Q/H
|
||||
});
|
||||
|
||||
console.log(result);
|
||||
// {
|
||||
// version: 2, // 版本号 1-40
|
||||
// size: 25, // 矩阵尺寸
|
||||
// modules: [[...], ...], // 二维码矩阵,1表示黑色,0表示白色
|
||||
// errorCorrectionLevel: 'M'
|
||||
// }
|
||||
```
|
||||
|
||||
## 平台差异
|
||||
|
||||
| 平台 | 渲染方式 | 说明 |
|
||||
|------|----------|------|
|
||||
| H5 | Canvas | 完全支持 |
|
||||
| App-Vue | Canvas | 完全支持 |
|
||||
| App-Nvue | View 布局 | 使用 Fallback 渲染 |
|
||||
| 微信小程序 | Canvas 2D | 推荐使用 Canvas 2D |
|
||||
| 其他小程序 | Canvas | 使用旧版 Canvas API |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 1. 二维码扫描不出来?
|
||||
|
||||
- 检查内容是否正确
|
||||
- 增加纠错级别(使用 'H')
|
||||
- 减小 Logo 尺寸(不超过二维码的 30%)
|
||||
- 增加二维码尺寸
|
||||
|
||||
### 2. 保存到相册失败?
|
||||
|
||||
- 小程序需要用户授权
|
||||
- App 需要配置相册权限
|
||||
- 检查图片路径是否正确
|
||||
|
||||
### 3. Logo 不显示?
|
||||
|
||||
- 确保图片路径正确
|
||||
- 本地图片使用绝对路径
|
||||
- 网络图片需要在小程序后台配置域名白名单
|
||||
|
||||
## 更新日志
|
||||
|
||||
### 1.0.0
|
||||
|
||||
- 初始版本发布
|
||||
- 支持基础二维码生成
|
||||
- 支持自定义样式
|
||||
- 支持 Logo 图片
|
||||
- 支持多平台
|
||||
Reference in New Issue
Block a user