此项目来源于 QRBTF
URL: qrbtf.com
中文介绍: 如何制作一个漂亮的二维码
在线调试 qrbtf.com
// 通过script 引入 <script src="./dist/beautifyQrcode.js"></script>; const { encodeData, renderer25D, rendererRect, rendererRound, rendererRandRound, rendererDSJ, rendererRandRect, rendererImage, rendererResImage, } = window.beautifyQrcode;npm i beautify-qrcodeimport { encodeData, renderer25D, rendererRect, rendererRound, rendererRandRound, rendererDSJ, rendererRandRect, rendererImage, rendererResImage, } from 'beautify-qrcode'; /** * 生成二维码数据 * @param {Object} options * @param {String} options.text 二维码内容 * @param {Number} [options.width] 生成svg的宽度 默认100% * @param {Number} [options.height] 生成svg的高度 默认100% * @param {Number} [options.correctLevel] 容错率 1=>7% 0 =>15% 3=>25% 2=>30% * @param {Boolean} [options.isSpace] 生成内容是否预留空隙 默认true */ const qrcode = encodeData({ text: QRBTF_URL, correctLevel: 0, }); /** * A1 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.type] 信息点样式 0=>矩形 1=>圆形,2=>随机 * @param {Number} [options.size] 信息点缩放 * @param {String} [options.opacity] 信息点不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 * @param {String} [options.otherColor] 信息点颜色 * @param {String} [options.posColor] 定位点点颜色 * @return {String} svg图片 */ const A1 = rendererRect(qrcode); /** * A2 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.type] 信息点样式 0=>矩形 1=>圆形,2=>随机 * @param {Number} [options.size] 信息点缩放 * @param {String} [options.opacity] 信息点不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 * @param {String} [options.otherColor] 信息点颜色 * @param {String} [options.posColor] 定位点点颜色 * @return {String} svg图片 */ const A2 = rendererRound(qrcode); /** * A3 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.type] 信息点样式 0=>矩形 1=>圆形,2=>随机 * @param {Number} [options.size] 信息点缩放 * @param {String} [options.opacity] 信息点不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 * @param {String} [options.otherColor] 信息点颜色 * @param {String} [options.posColor] 定位点点颜色 * @return {String} svg图片 */ const A3 = rendererRandRound(qrcode); /** * sp1 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.width1] x 宽度 * @param {Number} [options.width2] 信息点缩放 * @param {Number} [options.width3] 定位点宽度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>DSJ * @return {String} svg图片 */ const sp1 = rendererDSJ(qrcode); /** * sp2 * @param {*} qrcode * @return {String} svg图片 */ const sp2 = rendererRandRect(qrcode); /** * B1 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.height] 柱体高度 * @param {Number} [options.height2] 定位点柱体高度 * @param {String} [options.upColor] 上侧颜色 * @param {String} [options.leftColor] 左侧颜色 * @param {String} [options.rightColor] 右侧颜色 * @return {String} svg图片 */ const B1 = renderer25D(qrcode); /** * C1 * @param {*} qrcode * @param {*} options * @param {String} [options.backgroudImage] 背景图片 * @param {Number} [options.type] 信息点样式 0=>矩形 1=>圆形 * @param {Number} [options.size] 信息点缩放 * @param {Number} [options.opacity] 信息点不透明度 * @param {String} [options.otherColorDark] 信息点深色 * @param {String} [options.otherColorLight] 信息点浅色 * @param {Number} [options.posType] // 定位点样式 0=>'矩形' 1=>'圆形' 2=>'行星' * @param {String} [options.posColor] // 定位点颜色 * @return {String} svg图片 */ const C1 = rendererImage(qrcode, { backgroudImage: Rem, }); /** * C2 * @param {*} qrcode * @param {*} options * @param {String} options.backgroudImage 背景图片 * @param {Number} options.contrast 对比度 * @param {Number} options.exposure 曝光 * @param {Number} options.alignType 小定位点样式 0=>'无' 1=>'白' 2=>'黑白' * @param {Number} options.timingType 时钟样式 0=>'无' 1=>'白' 2=>'黑白' * @param {String} options.otherColor 信息点颜色 * @param {String} options.posColor 定位点颜色 * @return {Promise<String>} svg图片 */ rendererResImage(qrcode, { backgroudImage: defaultResImage }).then((res) => { const C2 = res; }); /** * SP_3 * @param {Object} qrcode * @param {Object} options * @param {String} [options.otherColor] 圆圈颜色 * @param {String} [options.posColor] 定位点颜色 */ const SP_3 = rendererCircle(qrcode); /** * A_a1 * @param {Object} qrcode * @param {Object} options * @param {String} [options.type] 连线方向 0=>左右 1=>上下 2=>纵横 3=>回环 4=>左上—右下 5=>右上—左下 6=>交叉" * @param {String} [options.size] 连线粗细 * @param {String} [options.opacity] 连线不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 3=>圆角矩形 * @param {String} [options.otherColor] 连线颜色 * @param {String} [options.posColor] 定位点颜色 */ const A_a1 = rendererLine(qrcode); /** * A_a2 * @param {Object} qrcode * @param {Object} options * @param {String} [options.type] 连线方向 0=>左右 1=>上下 2=>纵横 3=>回环 4=>左上—右下 5=>右上—左下 7=>交叉" * @param {String} [options.size] 连线粗细 * @param {String} [options.opacity] 连线不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 3=>圆角矩形 * @param {String} [options.otherColor] 连线颜色 * @param {String} [options.posColor] 定位点颜色 */ const A_a2 = rendererLine2(qrcode); /** * A_b1 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.type] 信息点样式 0=>矩形 1=>圆形 * @param {Number} [options.size] 干扰函数 0=>A 1=>B * @param {String} [options.opacity] 信息点不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 3=>圆角矩形 * @param {String} [options.otherColor] 信息点颜色 * @param {String} [options.otherColor2] 信息点颜色2 * @param {String} [options.posColor] 定位点颜色 */ const A_b1 = rendererFuncA(qrcode); /** * A_b2 * @param {Object} qrcode * @param {Object} options * @param {Number} [options.type] 信息点样式 0=>矩形 1=>圆形 * @param {Number} [options.size] 干扰函数 1=>A 2=>B * @param {String} [options.opacity] 信息点不透明度 * @param {String} [options.posType] 定位点样式 0=>矩形 1=>圆形 2=>行星 3=>圆角矩形 * @param {String} [options.otherColor] 信息点颜色 * @param {String} [options.otherColor2] 信息点颜色2 * @param {String} [options.posColor] 定位点颜色 */ const A_b2 = rendererFuncB(qrcode);- rendererResImage 可能需要使用小程序的canvas做一下适配
- 微信小程序 image 需要转换为 base64 svg 才能正常显示
- rendererImage backgroudImage 就是 svg image 的 [xlink:href=] 使用小程序临时路径也是可以展示的
- 尝试了下 cax 部分二维码并不能很好展示
- 暂时使用小程序没有找到方法来转换svg 为png、jpg 来保存到用户本地 我使用sharp库在服务端做转换
<image src="{{qrcode}}" mode="widthFix"></image>import { Base64 } from 'js-base64'; const base64Svg = rendererRect(qrcode, options); const qrcode= `data:image/svg+xml;base64,` + Base64.encode(base64Svg);

