未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

HTML代码:

<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">

相关JS代码:

/**
* 生成二维码
* data-width={宽度}
* data-height={高度}
* data-url={链接}
* @param $ele
*/
var generatorQRCODE = function ($ele) {
$ele.hide();
var params = $ele.data();
if(!params['width'] || !params['height'] || !params['url']){
console.log('生成二维码参数错误');
return false;
}
var image = new Image();
var imageUrl = "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插件

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2、在页面中需要显示二维码的地方加入以下代码:

<div id="code"></div>

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

定义转化方法:

function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (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));
}
}
return out;
}

在生成的时候调用转化方法:

var str = toUtf8("字符串测试!");
$('#code').qrcode(str);
二、在Vue-cli项目中动态生成二维码

1、引入qrcode--------npm install qrcode

2、在main.js中引入

import QRCode from 'qrcode' //定义生成二维码组件

3、在需要使用到生成二维码的组件中引入

import QRCode from 'qrcode' //引入生成二维码组件

4、在HTML中定义生成的位置,注意添加样式

<template>
<div id="query">
<h1>二维码:</h1>
<canvas id="canvas"></canvas>
</div>
</template>
#canvas{
width: 80%!important;
height: auto!important;
}

5、在js中定义生成二维码的方法并调用

//动态生成二维码
useqrcode(){ //生成的二维码内容,可以添加变量    this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
if (error) console.error(error)
console.log('success!');
})
}
您可能感兴趣的文章:JavaScript纯色二维码变成彩色二维码使用JS 插件qrcode.js生成二维码功能基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动JS实现鼠标移上去显示图片或微信二维码JS生成和下载二维码的代码js微信扫描二维码登录网站技术原理JavaScript实现的微信二维码图片生成器的示例Javascript生成带参数的二维码示例微信QQ的二维码登录原理js代码解析JavaScript动态生成二维码图片

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Java微信JavaScript二维码HTMLUT变量
tags: gt,二维,lt,qrcode,生成,out,canvas,data,var,params,js,width,height,str
分页:12
转载请注明
本文标题:11行JS代码制作二维码生成功能
本站链接:https://www.codesec.net/view/573637.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(56)