使用JS 插件qrcode.js生成二维码功能

效果图:

qrcode.js这是一个使用比较多的js生成二维码的插件,使用也很方便,第一次用,记录一下使用方法;

首先,导入js,这个网上可以找到,附上地址:https://github.com/davidshimjs/qrcodejs/

jsp:

<script type="text/javascript" src="<%=basePath %>bootstrap/js/qrcode.js" charset="UTF-8"></script> 
<input type="hidden" id="content" value="" />
  <!-- 二维码弹出框 -->
div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
      <h4 class="modal-title" id="myModalLabel">二维码</h4>
    </div>
    <div class="modal-body">
      <center>
        <div id="qrcode"></div>
        <table>
          <tbody>
            <tr>
              <td>
                <label class="col-sm-4 control-label" for="equ_name_qrcode"><h7>设备名称:</h7></label>
                <div class="col-sm-8">
                  <input class="form-control" id="equ_name_qrcode" type="text"/>
                </div>
              </td>
              <td>
                <label class="col-sm-4 control-label" for="equ_ip_qrcode"><h7>设备IP:</h7></label>
                <div class="col-sm-8">
                <input class="form-control" id="equ_ip_qrcode" type="text"/>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </center>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
      </button>
      <button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal">
        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印
      </button>
    </div>
  </div>
</div>
/div> 

js:

// 二维码对象
  var qrcode;
function showCode(id) {
  var rowid=$("#grid-table").jqGrid("getGridParam","selrow");
  if (rowid != null) {
    var rowData = $("#grid-table").jqGrid('getRowData',rowid);
    // 获取内容
    $("#content").val("公司名称:"+rowData.companyName+","+"设备IP:"+rowData.deviceIP+","+"投运时间:"+rowData.inTime);
    $("#equ_name_qrcode").val(rowData.deviceName);
    $("#equ_ip_qrcode").val(rowData.deviceIP);
  } else {
    toastr.error("点击错误,请重新点击");
    return;
  }
  // 清除上一次的二维码
  if(qrcode){
    $("#qrcode").html("");
  }
  // 创建二维码
  qrcode = new QRCode(document.getElementById("qrcode"), {
    width : 150,//设置宽高
    height : 150
  });
  $("#myModal_qrcode").modal();
//  $(".btn_print").attr('id','btn_print'+id);
  qrcode.makeCode(document.getElementById("content").value);
} 

以上所述是小编给大家介绍的使用JS qrcode.js生成二维码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 使用jquery.qrcode.js生成二维码插件

    二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render 

  • 二维码图片生成器QRCode.js简单介绍

    QRCode.js是一个实现生成二维码(QRCode)的js插件. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5的 Canvas,低版本IE使用table元素绘制),而且QRCode.js没有任何依赖.只需要引用一个QRCode.js. 1.引入qrcode.js <script src="qrcode.js" type="text/javascript"></script> 2.HTML代码 <div id=&qu

  • js基于qrcode.js生成二维码的方法【附demo插件源码下载】

    本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr

  • QRCode.js:基于JQuery的生成二维码JS库的使用

    1. QRCode.js QRCode.js是一个二维码生成javascript库:支持跨浏览器的HTML5 Canvas和表格标签的DOM操作:并且不依赖其它的库或拓展. 主页:QRCode.js Github:davidshimjs/qrcodejs 2. 用法 2.1 基础用法 <div id="qrcode"></div> <script type="text/javascript"> new QRCode(documen

  • javaScript生成支持中文带logo的二维码(jquery.qrcode.js)

    本文实例为大家分享了支持中文,且带logo的二维码的生成代码,供大家参考,具体内容如下 资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 //qrcode.js function QR8bitByte(data) { this.mode = QRMode.MODE_8BIT_BYTE; this.data = da

  • jquery插件qrcode在线生成二维码

    随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

  • 使用JS 插件qrcode.js生成二维码功能

    效果图: qrcode.js这是一个使用比较多的js生成二维码的插件,使用也很方便,第一次用,记录一下使用方法: 首先,导入js,这个网上可以找到,附上地址:https://github.com/davidshimjs/qrcodejs/ jsp: <script type="text/javascript" src="<%=basePath %>bootstrap/js/qrcode.js" charset="UTF-8"&g

  • JS实现将链接生成二维码并转为图片的方法

    本文实例讲述了JS实现将链接生成二维码并转为图片的方法.分享给大家供大家参考,具体如下: <div id="code"></div> <img id="img"/> <script type="text/javascript"> var qrcode=$("#code").qrcode({ render:'canvas||table', width: 200, //宽度 heig

  • Python使用QRCode模块生成二维码实例详解

    Python使用QRCode模块生成二维码 QRCode官网 https://pypi.python.org/pypi/qrcode/5.1 简介 python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode 库. 简单用法 import qrcode img = qrcode.make('hello, qrcode') img.save('test.png') 高级用法 import qrcode qr = qrcode.QRCode( version=1

  • Python基于QRCode实现生成二维码的方法【下载,安装,调用等】

    本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt

  • C#利用QrCode.Net生成二维码(Qr码)的方法

    现在网上很多应用都是用二维码来分享网址或者其它的信息.尤其在移动领域,二维码更是有很大的应用场景.因为项目的需要,需要在网站中增加一个生成二维码分析网址的功能,在谷歌大幅度抽筋的情况下无奈使用百度.百度N多,找到一些项目,但是可用性不强.(有一个项目是用VS2005开发的,在2010中调试不开.)终于在codeplex上找到一个"神器",这个"神器"可以很方便的生成二维码,速度那是相当的快,并且可支持中文,遵从MIT协议. QrCode.Net是一个使用C#编写的用

  • 教你如何使用google.zxing结合springboot生成二维码功能

    目录 Zxing原生方式 添加依赖 二维码生成工具类 添加Controller 添加测试页面 Hutool的方式 添加依赖 创建QRCodeService 添加Controller 效果测试 我们使用两种方式,去生成二维码,但是其实,二维码的生成基础,都是zxing包,这是Google开源的一个包,第一种是使用原始的zxing方式去实现,第二种是使用hutool来实现,hutool其实也是对于zxing的一个封装,但是封装前后,确实比较简单了. Zxing原生方式 添加依赖 <!-- zxing

  • Yii2.0实现生成二维码功能实例

    本文实例讲述了Yii2.0实现生成二维码功能.分享给大家供大家参考,具体如下: 通过composer安装: 1.下面的方法是通过composer加载 php composer.phar require "2amigos/yii2-qrcode-helper" "*" 或者添加 "2amigos/yii2-qrcode-helper" : "*" 到对应项目的composer.json文件中 通过归档文件安装: 不习惯用comp

  • Android 点击生成二维码功能实现代码

    先看效果: 输入内容,点击生成二维码: 点击logo图案: 代码: QRCodeUtil: package com.example.administrator.zxing; import android.graphics.Bitmap; import android.graphics.Canvas; import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zx

  • Android 二维码扫描和生成二维码功能

    在APP开发中,常遇到二维码扫描功能和生成二维码的需求.Android大部分是集成了zxing这个开源项目的扫码功能. 开源项目地址 下面给大家介绍一下具体的集成步骤 集成步骤 参考demo 1.demo展示如下: 1.1demo首页 1.2扫描界面 可以根据需求修改,我实际项目中界面截图如下: 1.3生成二维码 2.引入文件 2.1 下载demo,拷贝demo中的com.google.zxing5个包和com.utils包引入到自己的项目中. 2.2 拷贝本项目demo中的布局activity

随机推荐