分享一波前端二维码生成分案

简介: 前端生成二维码我们之前使用的是 QRCode.js,我相信大家首选也都是这个。然后前两天,来需求了,想要实现二维码中间放 logo 的效果。没办法我就上网调研了一番。qrcodejs 是不是支持的。支付宝他们就是生成了一个二维码,然后在中心位置又放了个 logo。dom上看是两层,分离的。也有一些插件基于 qrcodejs 封装,支持了特殊效果。

调研结果


  1. https://www.lilnong.top/static/html/qrcode-20200408-jq22-yanshi4094.html 美化版本

3.png


image = new Image();
    image.src = `//www.lilnong.top/static/img/avator/avator-0.jpg`;
    image.onload = function(){
        $('#qrcode').erweima({
            mode: 4,
            mSize:20,
            image: image,
            text: 'https://www.lilnong.top'
        });
    }


  1. https://www.lilnong.top/static/html/qrcode-20200408-jq22-yanshi21277.html 普通版本


4.png


$("#qrcode").qrcode({
    render: "canvas",
    text: 'https://www.lilnong.top/cors/yanshi21277',
    width : "200", //二维码的宽度
    height : "200", //二维码的高度
    background : "#ffffff", //二维码的后景色
    foreground : "#000000", //二维码的前景色
    src: '//www.lilnong.top/static/img/avator/avator-0.jpg' //二维码中间的图片
});


  1. https://www.lilnong.top/static/html/qrcode-20200408-qart-jq22-jqueryinfo12691.html qart.js插件版本,识别度不高


bVbGTEC.webp.jpg


image = new Image();
    image.src = '//www.lilnong.top/static/img/avator/avator-14.jpg';
    image.width = 100;
    document.body.appendChild(image)
    image.onload = function(){
        new QArt({
            value: 'https://www.lilnong.top/cors/qart/threshold',
            imagePath: '//www.lilnong.top/static/img/avator/avator-14.jpg',
            filter: 'threshold',
            size: 300
        }).make(function (canvas) {
            document.getElementById('qrcode').appendChild(canvas)
        });
        new QArt({
            value: 'https://www.lilnong.top/cors/qart/color',
            imagePath: '//www.lilnong.top/static/img/avator/avator-14.jpg',
            filter: 'color',
            size: 300
        }).make(function (canvas) {
            document.getElementById('qrcode').appendChild(canvas)
        });
        new QArt({
            value: 'https://www.lilnong.top/cors/qart/noimagePath',
            imagePath: '',
            filter: 'color',
            size: 300
        }).make(function (canvas) {
            document.getElementById('qrcode').appendChild(canvas)
        });
    }


  1. https://www.lilnong.top/static/html/qrcode-20200408-jq22-yanshi22345.html 高度美化版本,配置复杂,不适用。


bVbGTEi.webp.jpg


qrcode = new QRCode(document.getElementById("qrcode"), {
        text: "https://www.lilnong.top/cors/",
        height: 500,
        codeWidth: 320,
        codeHeight: 320,
        top: 85,
        left: 80,
        materials: {
            border: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_border.png",
            eye: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_eye.png",
            row4: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_row4.png",
            col4: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_col3.png",
            row2col3: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_row2col3.png",
            row3col2: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_row3col2.png",
            col3: ["https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_col3.png", "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_col3_2.png"],
            row2col2: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_row2col2.png",
            corner: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_corner.png",
            row2: ["https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_row2.png", "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_row2_2.png"],
            col2: "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_col2.png",
            single: ["https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_single.png", "https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_single_2.png"],
        }
    });


相关文章
|
前端开发 JavaScript API
生成微信支付二维码前端 | 学习笔记
快速学习 生成微信支付二维码前端
420 0
|
JavaScript 前端开发 Java
你不可错过的二维码生成与解析-java后台与前端js都有
1.二维码分类   二维条码也有许多不同的码制,就码制的编码原理而言,通常分为三种类型。 线性堆叠式二维码 编码原理: 建立在一维条码基础之上,按需要堆积成两行或多行。 图示: 矩阵式二维码 最常用编码,原理: 在一个矩形空间通过黑白像素在矩阵中的不同分布进行编码。
1964 0
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
229 14
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
67 0
|
3月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
3月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
3月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
155 1
|
3月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
4月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架