11行JS代碼制作二維碼生成功能

第11行JS代碼制作二維碼生成功能imgid="qrcode"data-width="100"data-height="100"data-url="/"

相關(guān)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('生成二維碼參數(shù)錯(cuò)誤');

returnfalse;

varimage=newImage();

varimageUrl="/share/qrcodew="+params['width']+"h="+params['height']+"url="+params['url']+"";

image.src=imageUrl;

$ele.attr('src',imageUrl);

$ele.show();

generatorQRCODE($("#qrcode"));

再給大家分享一下其他生成二維碼的案例：

使用jquery.qrcode生成二維碼

1、首先在頁面中加入jquery庫文件和qrcode插件

scripttype="text/javascript"src="jquery.js"/script

scripttype="text/javascript"src="jquery.qrcode.min.js"/script

2、在頁面中需要顯示二維碼的地方加入以下代碼：

divid="code"/div

3、調(diào)用qrcode插件。支持canvas和table兩種方式進(jìn)行圖片渲染

canvas方式：

$('#code').qrcode("");//任意字符串

table方式：

$("#code").qrcode({

render:"table",//table方式

width:200,//寬度

height:200,//高度

text:""http://任意內(nèi)容

});

4、如果生成的二維碼內(nèi)容包含文字，需要把字符串轉(zhuǎn)換成UTF-8

定義轉(zhuǎn)化方法：

functiontoUtf8(str){

varout,i,len,c;

out="";

len=str.length;

for(i=0;ilen;i++){

c=str.charCodeAt(i);

if((c=0x0001)(c=0x007F)){

out+=str.charAt(i);

}elseif(c0x07FF){

out+=String.fromCharCode(0xE0|((c12)0x0F));

out+=String.fromCharCode(0x80|((c6)0x3F));

out+=String.fromCharCode(0x80|((c0)0x3F));

}else{

out+=String.fromCharCode(0xC0|((c6)0x1F));

out+=String.fromCharCode(0x80|((c0)0x3F));

returnout;

}

在生成的時(shí)候調(diào)用轉(zhuǎn)化方法：

varstr=toUtf8("字符串測試！");

$('#code').qrcode(str);

二、在Vue-cli項(xiàng)目中動(dòng)態(tài)生成二維碼

1、引入qrcode--------npminstallqrcode

2、在main.js中引入

importQRCodefrom'qrcode'//定義生成二維碼組件

3、在需要使用到生成二維碼的組件中引入

importQRCodefrom'qrcode'//引入生成二維碼組件

4、在HTML中定義生成的位置，注意添加