jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单:

1、首先在页面中加入jquery库文件和qrcode插件。

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

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

  1. <div id="qrcodeCanvas"></div>
  2. <script>
  3. jQuery('#qrcodeCanvas').qrcode({
  4. width   : 300,
  5. height  : 300,
  6. text    : http://www.baidu.com
  7. });
  8. </script>

上面这段代码生成一张 300x300 的canvas二维码, 它包含的信息便是百度的网址。

3、用JS将上面的canvas内容转换成图片(png或jpg格式使其可以保存)。

首先设个img标签:

  1. <img id="image" src="">

最后用JS代码转换:

  1. var image = document.getElementById("image");
  2. var canvas = document.getElementById("qrcodeCanvas").getElementsByTagName("canvas")[0];
  3. image.src = canvas.toDataURL("image/png");

完成。

转自:http://coyotestark.iteye.com/blog/2265027

使用jquery.qrcode生成二维码(转)的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. qrcode 生成二维码

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

随机推荐

  1. 浅析SQL查询语句未显式指定排序方式,无法保证同样的查询每次排序结果都一致的原因

    本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...

  2. 超千个节点OpenStack私有云案例(1):CERN 5000+ 计算节点私有云

    CERN:欧洲核子研究组织 本文根据以下几篇文章整理而来: https://www.openstack.org/summit/tokyo-2015/videos/presentation/unveil ...

  3. MonoTouch 二三事(三)mono mkbundle 打包程序的解包支持

    2014.10.06 更新 编写了 IDA Pro 的插件,用来解包和打包 mkbundle程序,请参见 https://github.com/binsys/MKBundleManager 许久以后, ...

  4. 简单的转盘抽奖——CSS动画优化

    前言 前两天去一家公司面试,被问到一些小游戏的东西.面试官提到了刷红包还有抽奖这些怎么实现,当时简单说了下思路,回来之后想想还是说的太轻描淡写了,干说不做就是耍流氓,所以就做了一个(Demo & ...

  5. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  6. ASP.NET MVC Model元数据(二)

    ASP.NET MVC Model元数据(二) 前言 在上篇中,给大家留个对Model元数据的印象,并没有对Model元数据有过多的讲解,而在本篇中也不会对Model元数据的本身来解释,而是针对于它的 ...

  7. ABP源码分析二十五:EventBus

    IEventData/EventData: 封装了EventData信息,触发event的源对象和时间 IEventBus/EventBus: 定义和实现了了一系列注册,注销和触发事件处理函数的方法. ...

  8. ABP框架 - 多层结构

    文档目录 本节内容: 简介 ABP结构 多层 其它层(通用) 领域(Core)层 应用层 基础层 Web & 表示层 其它 总结 简介 一个应用的代码库的分层是一个广为接受的技术,用来减少复杂 ...

  9. mysql数据库开发常见问题及优化

    mysql 数据库是被广泛应用的关系型数据库,其体积小.支持多处理器.开源并免费的特性使其在 Internet 中小型网站中的使用率尤其高.在使用 mysql 的过程中不规范的 SQL 编写.非最优的 ...

  10. 计算机程序的思维逻辑 (30) - 剖析StringBuilder

    上节介绍了String,提到如果字符串修改操作比较频繁,应该采用StringBuilder和StringBuffer类,这两个类的方法基本是完全一样的,它们的实现代码也几乎一样,唯一的不同就在于,St ...