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. Linux下用netstat查看网络状态、端口状态(转)

    转:http://blog.csdn.net/guodongdongnumber1/article/details/11383019 在linux一般使用netstat 来查看系统端口使用情况步.  ...

  2. Hibernatel框架基础使用

    Hibernatel框架基础使用 1.简介 1.1.Hibernate框架由来 Struts:基于MVC模式的应用层框架技术 Hibernate:基于持久层的框架(数据访问层使用)! Spring:创 ...

  3. java I/O流

    输入流(读取数据的流) BufferedInputStream---继承--->FileInputStream--继承--->InputStream------> (1)字节流操作中 ...

  4. ASP.NET Core MVC 配置全局路由前缀

    前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应用背景 不知道大家在做 Web Ap ...

  5. 不该活着的SqlHelper和DBHelper

    前言: 还记得刚学ADO.NET的情景么? 还记得当年是怎么从ADO.NET被忽悠到用SqlHelper的么? 话说从入门到走上工作岗位那些年,我们就一直被纯纯地教导或引导,ADO.NET太原始,得封 ...

  6. Akka.NET v1.0 已发布,支持Mono

    Akka.NET 是Java/Scala 流行框架Akka的一个 .NET 开源移植.可用于构建高并发,分布式和容错事件驱动的应用在 .NET 和 Mono 平台之上.Akka.NET 经过一年多的努 ...

  7. ABP(现代ASP.NET样板开发框架)系列之1、ABP总体介绍

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之1.ABP总体介绍 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  8. Jquery事件

    在JS里加事件  <input type="button" value="测试" onclick="test()"/>跟一个函数 ...

  9. PHP_02之使用补充

    JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据:  PHP:   $arr=[...];   echo json_encode($arr);  JS:   var ob ...

  10. NET Core-学习笔记(二)

    这里要分享的是接着上篇:NET Core-学习笔记(一)展开的继续学习core笔记,有不妥之处或者更好见解的地方希望各位朋友多多分享. 下面是本篇将要分享的学习步奏,对于刚学或者即将要学习的朋友做个相 ...