前端生成二维码我们之前使用的是 QRCode.js,我相信大家首选也都是这个。
然后前两天,来需求了,想要实现二维码中间放 logo
的效果。没办法我就上网调研了一番。
- qrcodejs 是不是支持的。
- 支付宝他们就是生成了一个二维码,然后在中心位置又放了个 logo。dom上看是两层,分离的。
- 也有一些插件基于 qrcodejs 封装,支持了特殊效果。
调研结果
-
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' }); }
-
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' //二维码中间的图片 });
-
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) }); }
-
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
欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。