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. Quartz2D总结

    天了噜,脑子完全懵了,最起码说出来个上下文啊,连这个都给忘了,特此总结一下,并以此缅怀这次面试 Quartz2D的API来自于Core Graphics(这就是为什么CGContextRef是以CG开 ...

  2. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  3. 在UPDATE中更新TOP条数据以及UPDATE更新中使用ORDER BY

    正常查询语句中TOP的运用: SELECT TOP 1000 * FROM MP_MemberGrade   随意更新一张表中满足条件的前N条数据: UPDATE TOP (1) MP_Member ...

  4. 实现php连接memcached

    准备工作: 实现lnmp环境 给php添加模块,so库 下载扩展包:memcache-2.2.5.tgz wget http://pecl.php.net/get/memcache-2.2.5.tgz

  5. 第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南

    欢迎查看第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南,该处理器可为开发人员和最终用户提供领先的 CPU 和图形性能增强.各种新特性和功能以及显著提高的性能. 本指南旨在帮助软件开发人员 ...

  6. ASP.NET Aries DataGrid 配置表头说明文档

    DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...

  7. 【完全开源】知乎日报UWP版(下篇):商店APP、github源码、功能说明。Windows APP 良心出品。

    目录 说明 功能 截图+视频 关于源码和声明 说明 陆陆续续大概花了一个月的时间,APP算是基本完成了.12月份一直在外出差,在出差期间进行了两次功能完善,然后断断续续修补了一些bug,到目前为止,我 ...

  8. php 查询

    <h1>租房信息</h1> <?php $db = ","asdadads"); $tj = "1=1"; $tj1 = ...

  9. Android 捕获异常并在应用崩溃后重启应用

    问题概述: 在Android应用开发中,偶尔会因为测试的不充分导致一些异常没有被捕获,这时应用会出现异常并强制关闭,这样会导致很不好的用户体验,为了解决这个问题,我们需要捕获相关的异常并做处理. 首先 ...

  10. ERP软件的价格设计

    ERP体现出信息流.资金流.物流在供应商.企业.客户间的运营方向,是以销售为源头,生产.物料需求计划为核心,以金额.实时数据为基础的整体.ERP的核心是MRP(物料需求).企业的经营活动最终是为了赢利 ...