前端生成二维码我们之前用的是QRCode.js,相信大家的首选也是这个。然后前两天有个需求来了,想实现在二维码中间放一个logo的效果。我别无选择,只能在网上做一些研究。不支持qrcodejs。支付宝只是生成了一个二维码,然后在中间放了一个logo。dom看起来像分开的两层。还有一些基于qrcodejs包的支持特效的插件。研究成果https://www.lilnong.top/static/html/qrcode-20200408-??jq22-yanshi4094.html美化版image=newImage();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",//二维码背景高度:"#ffffff",//背景coloroftheQRcodeforeground:"#000000",//二维码前景颜色src:'//www.lilnong.top/static/img/avator/avator-0.jpg'//二中的图片二维码中间});https://www.lilnong.top/static/html/qrcode-20200408-??qart-jq22-jqueryinfo12691.htmlqart.js插件版,识别度不高image=newImage();image.src='//www.lilnong.top/static/img/avator/avator-14.jpg';图片.宽度=100;文档.正文.appndChild(image)image.onload=function(){newQArt({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)});新QArt({值:'https://www.lilnong.top/cors/qart/color',imagePath:'//www.lilnong.top/static/img/avator/avator-14.jpg',过滤器:'color',size:300}).make(function(canvas){document.getElementById('qrcode').appendChild(canvas)});newQArt({value:'https://www.lilnong.top/cors/qart/noimagePath',imagePath:'',filter:'color',size:300}).make(function(canvas){文档。getElementById('二维码').appendChild(canvas)});}https://www.lilnong.top/static/html/qrcode-20200408-??jq22-yanshi22345.html高度美化版,配置复杂,不适用qrcode=newQRCode(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",第4行:顶部/静态/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_col3.png",2row_materials_col3://www.lilnong.顶部/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_col3:materials_electron","/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_erwm20195electron_material10121",角落:“https://www.lilnong.top/static/img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_corner.png”,第2行:[“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.top/static/lilnong.img/yanshi22345/http___www.jq22.com_demo_erwm201910121055_materials_electron_col2.png",单:.也加我的微信前端交流群。
