11行JS代码制作二维码生成功能
HTML代码:
相关JS代码:
/** *生成二维码 *data-width={宽度} *data-height={高度} *data-url={链接} *@param$ele */ vargeneratorQRCODE=function($ele){ $ele.hide(); varparams=$ele.data(); if(!params['width']||!params['height']||!params['url']){ console.log('生成二维码参数错误'); returnfalse; } varimage=newImage(); varimageUrl="http://pan.baidu.com/share/qrcode?w="+params['width']+"&h="+params['height']+"&url="+params['url']+""; image.src=imageUrl; $ele.attr('src',imageUrl); $ele.show(); }; generatorQRCODE($("#qrcode"));
再给大家分享一下其他生成二维码的案例:
使用jquery.qrcode生成二维码
1、首先在页面中加入jquery库文件和qrcode插件
2、在页面中需要显示二维码的地方加入以下代码:
3、调用qrcode插件。支持canvas和table两种方式进行图片渲染
canvas方式:
$('#code').qrcode("http://www.baidu.com");//任意字符串
table方式:
$("#code").qrcode({ render:"table",//table方式 width:200,//宽度 height:200,//高度 text:"www.helloweba.com"//任意内容 });
4、如果生成的二维码内容包含文字,需要把字符串转换成UTF-8
定义转化方法:
functiontoUtf8(str){ varout,i,len,c; out=""; len=str.length; for(i=0;i=0x0001)&&(c<=0x007F)){ out+=str.charAt(i); }elseif(c>0x07FF){ out+=String.fromCharCode(0xE0|((c>>12)&0x0F)); out+=String.fromCharCode(0x80|((c>>6)&0x3F)); out+=String.fromCharCode(0x80|((c>>0)&0x3F)); }else{ out+=String.fromCharCode(0xC0|((c>>6)&0x1F)); out+=String.fromCharCode(0x80|((c>>0)&0x3F)); } } returnout; }
在生成的时候调用转化方法:
varstr=toUtf8("字符串测试!"); $('#code').qrcode(str);
二、在Vue-cli项目中动态生成二维码
1、引入qrcode--------npminstallqrcode
2、在main.js中引入
importQRCodefrom'qrcode'//定义生成二维码组件
3、在需要使用到生成二维码的组件中引入
importQRCodefrom'qrcode'//引入生成二维码组件
4、在HTML中定义生成的位置,注意添加样式
二维码:
#canvas{ width:80%!important; height:auto!important; }
5、在js中定义生成二维码的方法并调用
//动态生成二维码 useqrcode(){//生成的二维码内容,可以添加变量this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;varcanvas=document.getElementById('canvas') QRCode.toCanvas(canvas,this.QueryDetail,function(error){ if(error)console.error(error) console.log('success!'); }) }