使用jquery.qrcode生成二维码(转)
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单:
1、首先在页面中加入jquery库文件和qrcode插件。
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在页面中需要显示二维码的地方加入以下代码。
- <div id="qrcodeCanvas"></div>
- <script>
- jQuery('#qrcodeCanvas').qrcode({
- width : 300,
- height : 300,
- text : http://www.baidu.com
- });
- </script>
上面这段代码生成一张 300x300 的canvas二维码, 它包含的信息便是百度的网址。
3、用JS将上面的canvas内容转换成图片(png或jpg格式使其可以保存)。
首先设个img标签:
- <img id="image" src="">
最后用JS代码转换:
- var image = document.getElementById("image");
- var canvas = document.getElementById("qrcodeCanvas").getElementsByTagName("canvas")[0];
- image.src = canvas.toDataURL("image/png");
完成。
转自:http://coyotestark.iteye.com/blog/2265027
使用jquery.qrcode生成二维码(转)的更多相关文章
- 使用jquery.qrcode生成二维码及常见问题解决方案
转载文章 使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...
- 使用jquery.qrcode生成二维码实现微信分享功能
前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...
- (转)js jquery.qrcode生成二维码 带logo 支持中文
场景:公司最最近在开发二维码支付业务,所以需要做一个html5中的二维码生成和部署! 前天用js生成二维码,节省服务器资源及带宽 原版jquery.qrcode不能生成logo,本文采用的是修改版 1 ...
- jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。
生成二维码 引用 jquery.qrcode.js :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...
- 使用jquery.qrcode生成二维码支持logo,和中文
/* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...
- jquery.qrcode 生成二维码带logo
<div id="container">这里是二维码显示位置</div> <script language="JavaScript" ...
- jquery.qrcode生成二维码支持中文
基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...
- qrcode.react和jquery.qrcode生成二维码
qrcode.react 1.安装 npm install qrcode.react 2.用法(这里用的ant design) import React from 'react'; import QR ...
- qrcode 生成二维码
qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...
随机推荐
- 真正的汉化-PowerDesigner 16.5 汉化
一.背景 经常使用PowerDesigner,之前使用15版本,后来16出来后,就一直在使用16,不过一直是英文.一些同事对使用英文版总显示有些吃力. 遍寻百度.必应,都没有找到真正的针对版本16的汉 ...
- centos7 安装时候检测不到空余硬盘的解决办法
我是用U盘装的centos,在进行硬盘规划时,看到硬盘的可用空间太少 这是因为我的硬盘以前装的是windows系统,硬盘几乎都已经被windows 操作系统给使用了,剩余空间也只会是windows用剩 ...
- 【一起学OpenFoam】02 软件准备
"工欲善其事必先利其器",在利用OpenFoam解决我们的工程问题之前,首先要做的事情是搭建一个OpenFoam运行环境.很遗憾的是,OpenFoam的原生开发系统是Linux,因 ...
- 使用Nginx+Lua代理Hadoop HA
一.Hadoop HA的Web页面访问 Hadoop开启HA后,会同时存在两个Master组件提供服务,其中正在使用的组件称为Active,另一个作为备份称为Standby,例如HDFS的NameNo ...
- Entity Framework 6 Recipes 2nd Edition(9-3)译->找出Web API中发生了什么变化
9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...
- MySQL基础之视图
关于视图 视图是虚表,其中并不存在数据,只是多个表的组成 使用视图的优势 视图可以代替复杂的查询SQL语句,可以事先将不同表的多个数据组织起来 提高权限控制管理,能够将权限限制为行级管理,更具有安全性 ...
- Atitit 常用二维码对比(QR、PDF417、DM、汉信码 Aztec code maxicode
Atitit 常用二维码对比(QR.PDF417.DM.汉信码 Aztec code maxicode DM码则更"小",可在仅仅25mm²的面积上编码30个数字.但也就是因为太小 ...
- .net使用正则表达式校验、匹配字符工具类
开发程序离不开数据的校验,这里整理了一些数据的校验.匹配的方法: /// <summary> /// 字符(串)验证.匹配工具类 /// </summary> public c ...
- Android Studio vs. Eclipse ADT Comparison
Android Studio 是一个新的基于 IntelliJ IDEA Android 的安卓开发环境,它对 Eclipse ADT 进行了改进并新增了功能. Feature Android Stu ...
- copy()之绝版应用
我选用了一个稍稍复杂一点的例子,它的大致功能是:从标准输入设备(一般是键盘)读入一些整型数据,然后对它们进行排序,最终将结果输出到标准输出设备(一般是显示器屏幕).这是一种典型的处理方式,程序本身具备 ...