一、jquery-qrcode

  jquery-qrcode是一个为浏览器生成二维码的jquery插件。我们很容易将它集成到我们的应用。该插件也可以独立使用,也比较小。它是直接在客户端生成二维码生成。所以不会有图片的下载过程,一定程度上提高了系统性能。

二、实例

  1、jquery-qrcode下载地址为:https://github.com/dnspod/jquery-qrcode 。该包解压后有如下几个文件

  2、开始编写程序

    a、创建index.html文件,文件内容如下:

 <!DOCTYPE html>
<html>
<head>
<title>basic example</title>
</head>
<body>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./src/jquery.qrcode.js"></script>
<script type="text/javascript" src="./src/qrcode.js"></script>
<p>Render in table</p>
<div id="qrcodeTable"></div>
<p>Render in canvas</p>
<div id="qrcodeCanvas"></div>
<script>
jQuery('#qrcodeTable').qrcode({
render : "table", <!--二维码生成方式 -->
text : "http://www.baidu.com" <!-- 二维码内容 -->
});
jQuery('#qrcodeCanvas').qrcode({
text : "http://www.baidu.com"
});
</script>
</body>
</html>

  由于该插件使用到了jquery,所以我们需要引入jquery的支持。生成的二维码也有两种方式,一种是使用网页table生成网页。另外一种是直接使用canvas生成图片。

jquery-qrcode生成二维码的更多相关文章

  1. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  2. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

  3. 使用jquery.qrcode生成二维码(转)

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  4. (转)js jquery.qrcode生成二维码 带logo 支持中文

    场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...

  5. jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。

    生成二维码 引用 jquery.qrcode.js  :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...

  6. 使用jquery.qrcode生成二维码支持logo,和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  7. jquery.qrcode 生成二维码带logo

    <div id="container">这里是二维码显示位置</div> <script language="JavaScript" ...

  8. jquery.qrcode生成二维码支持中文

    基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...

  9. qrcode.react和jquery.qrcode生成二维码

    qrcode.react 1.安装 npm install qrcode.react 2.用法(这里用的ant design) import React from 'react'; import QR ...

  10. qrcode 生成二维码

    qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...

随机推荐

  1. Angular系列------AngularJS入门教程:导言和准备(转载)

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...

  2. 《构建之法》第8、9、10章的读后感和第一个sprint总结

    第八章——主要介绍软件需求. 主要步骤:1.获取和引导需求.2.分析和定义需求.3.验证需求.4.在软件产品的生命周期中管理需求. 对软件需求的划分:1.对产品功能性的需求.2.对产品开发过程的需求. ...

  3. 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

    什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...

  4. ASP.NET MVC5--为数据库新增字段(涉及数据库迁移技术)

    Setting up Code First Migrations for Model Changes--为模型更改做数据库迁移. 1.打开资源管理器,在App_Data文件夹下,找到movies.md ...

  5. 记一次纠结Macbook 重装OS X的系统

    本文所有图片都是网上截图,不是实操环境.本文不具有教学意义. 起因:Macbook 白苹果了,无限菊花. 我的Macbook 只能装 OS X Mountain Lion 10.8,但是呢 MacBo ...

  6. 百度FIS入门

    1.fis作为nodejs的模块来管理的,所以首先得安装nodejs,看我前面的安装nodejs的文章. 2.官方的案例下载包https://github.com/hefangshi/fis-quic ...

  7. FL2440驱动添加(5)ADC驱动学习笔记

    由图可知,模拟ADC分为两部分功能,一部分是触屏功能,另一部分就是普通ADC功能.分别可以产生INT_TC和INT_ADC 两个中断.该ADC模块总共有8个通道可以进行模拟信号的输入,分别是AIN0. ...

  8. treap树---Double Queue

    HDU   1908 Description The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office i ...

  9. java猜数字游戏

    import java.util.Scanner; //导入包 class GuessNum { public static void main(String[] args) { int num = ...

  10. ahjesus如何在windows下制作适用于mac的u盘启动盘

    先用macdrive把U盘格式化成hfs+格式,然后下载原版dmg格式系统,再用ultraISO将dmg转成ISO格式(也可以不用转换),最后用ultraISO里面“启动”--->“写入硬盘映像 ...