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 相关文章推荐
javascript 节点遍历函数
Mar 28 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 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 无极分类(递归)实现代码
2010/01/05 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python的Tqdm模块的使用
2018/01/10 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
英语自荐信常用语句
2013/12/13 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
党支部公开承诺书
2014/03/28 职场文书
三问三解心得体会
2014/09/05 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android