分享一波前端二維碼生成分案

前端生成二維碼咱們以前使用的是 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

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。