好资源导航 » 文章资讯 » 11行JS代码制作二维码生成功能

11行JS代码制作二维码生成功能

2023-09-15 15:47:05 276

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!');
})
}

返回顶部
3162201930
czq8825@qq.com

11行JS代码制作二维码生成功能

二维码：

随机推荐

11行JS代码制作二维码生成功能

二维码：

热门推荐

随机推荐