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

简介: 前端生成二维码我们之前使用的是 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"],
        }
    });


相关文章
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
65 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
8月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
34 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
32 0
|
4月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
41 1
|
8月前
|
JavaScript 前端开发 调度
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
59 0
|
8月前
|
域名解析 缓存 网络协议
前端学习笔记202307学习笔记第五十七天-模拟面试笔记http-DNs解析ip地址
前端学习笔记202307学习笔记第五十七天-模拟面试笔记http-DNs解析ip地址
72 1
|
8月前
|
前端开发 JavaScript 安全
前端学习笔记202307学习笔记第五十七天-模拟面试笔记网络-xss和csrf攻击
前端学习笔记202307学习笔记第五十七天-模拟面试笔记网络-xss和csrf攻击
58 0