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


Posted in Javascript onMarch 09, 2018

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 相关文章推荐
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
详谈Node.js之操作文件系统
Aug 29 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 #Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 #Javascript
vue注册组件的几种方式总结
Mar 08 #Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 #Javascript
layui之select的option叠加问题的解决方法
Mar 08 #Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 #Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php封装一个异常的处理类
2017/06/08 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JavaScript多线程详解
2015/08/12 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
VUE重点问题总结
2018/03/19 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
深入理解Python中的元类(metaclass)
2015/02/14 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Windows下python3.7安装教程
2018/07/31 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python argparse模块应用实例解析
2019/11/15 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
入党自我鉴定
2014/03/25 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
党员承诺书格式
2014/05/21 职场文书
2014年客房部工作总结
2014/11/22 职场文书
小学教师个人总结
2015/02/05 职场文书
员工升职自我评价
2019/03/26 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS