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

前端生成二维码我们之前使用的是 QRCode.js，我相信大家首选也都是这个。

然后前两天，来需求了，想要实现二维码中间放 logo 的效果。没办法我就上网调研了一番。

1. qrcodejs 是不是支持的。
2. 支付宝他们就是生成了一个二维码，然后在中心位置又放了个 logo。dom上看是两层，分离的。
3. 也有一些插件基于 qrcodejs 封装，支持了特殊效果。

调研结果

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

   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'
           });
       }

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

   $("#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' //二维码中间的图片
   });

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

   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)
           });
       }

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

   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"],
           }
       });

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。