前端生成二维码

最近在做一个移动端项目,想实现点击按钮生成一个分享的二维码。

而项目一开始就是基于jquery2.0开发的,所以第一开始就JQ的插件,搜到jquery.qrcode.js,它支持以二种方式生成二维码,在支持canvas的现代浏览器下使用canvas来生成分享二维码,

在IE低版本等很搓的浏览器下使用table生成二维码图片,使用说明如下:

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

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

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

<div id="code"></div> 

3、调用qrcode插件。

qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5。直接调用如下:

$(‘#code‘).qrcode("http://www.helloweba.com"); //任意字符串 

您也可以通过以下方式调用:

$("#code").qrcode({     render: "table", //table方式     width: 200, //宽度     height:200, //高度     text: "www.helloweba.com" //任意内容 }); 

这样就可以在页面中直接生成一个二维码,你可以用手机“扫一扫”功能读取二维码信息。

4识别中文

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode是采用charCodeAt()方式进行编码转换的。而这个方法默认会获取它的Unicode编码,如果有中文内容,

在生成二维码前就要把字符串转换成UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

function toUtf8(str) {        var out, i, len, c;        out = "";        len = str.length;        for(i = 0; i < len; i++) {            c = str.charCodeAt(i);            if ((c >= 0x0001) && (c <= 0x007F)) {                out += str.charAt(i);            } else if (c > 0x07FF) {                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));                out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));            } else {                out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));            }        }        return out;    } 

以下示例:

var str = toUtf8("钓鱼岛是中国的!"); $(‘#code‘).qrcode(str);以上内容摘抄自:http://www.helloweba.com/view-blog-226.html

但是发现在生成二维码的时候发现扫了半天没反应,或者根本扫不上,个人感觉主要是我这个项目是以REM布局,而在生成二维码的时候又不能以REM为单位,同时又为了保证移动端1PX的实现,使用了像素比缩放,

导致生成的二维码难识别。

后面在segmentfault发现有一个大牛提到使用第三方服务。

于是右键复制链接才发现其中规则:http://pan.baidu.com/share/qrcode?w=150&h=150&url=https://www.baidu.com

这个应该是百度一个二维码生成接口,相当于是一个get请求,其中W为150PX,h为150PX,url为是想要生成链接的二维码,于是通过img的src属性成功生成了想要二维码,而且生成的二维码是图片格式,不会有什么兼容问题,

扫码识别也很快,果断使用这个方式去实现。

这位大牛留言如下:

在做二维码分享的时候希望通过带hash值的方式去判断分享来源,发现这样是行不通的,不知道是生成二维的时候还是浏览器默认行为会把除#号后的值全部删除,无奈改成传参方式,应该生成二维码的方式还有很多种,期待更多的人分享那些难得的巧技。

时间: 2024-10-27 09:43:36

前端生成二维码的相关文章

前端生成二维码 jquery.qrcode.js

用jquery的二维码插件:jquery.qrcode.js 官方简介:jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件,它使用非常简单,生成的 QRcode 无需下载图片,并且不依赖第三方服务,比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用,并且压缩之后大小小于 4K. jquery.qrcode.js 使用 1. 加载 jQuery 和 jquery.qrcode.js: <script type='text

前端生成二维码插件jquery.qrcode.min.js

1.插件介绍 jquery.qrcode.min.js插件是jq系列的基于jq,在引入该插件之前要先引入jq.能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 闲话少说,看demo吧!(haha...) 2.快速使用demo 简单介绍:这是一款快速应用案例,没有太特殊的需求的话够用了.鉴于需求,本例是把二维码生成了图片,可以保存到手机,然后发送给好友,直接识别二维码. 1 <!DOCTYPE html> 2 <html> 3 &

javascript生成二维码

摘要: 百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙.在现代商业活动中,可实现的应用十分广泛,如:产品防伪/溯源.广告推送.网站链接.数据下载.商品交易.定位/导航.电子商务应用.车辆管理.信息传递等.如今智能手机扫一扫(简称313)功能的应用使得二维码更加普遍,随着国内物联网产业的蓬勃发展,更多的二维码技术应用解决方案被开发,二维码成为移动互联网入口

生成二维码图片并且使用BASE64编码显示到前端页面

现在用二维码传递消息是如此的流行和快捷,二维码中 可存储的信息量比较大,容易识别,内容丰富,可以储存文本,链接,名片等等.并且现在支付宝微信等的支付都直接可以用扫描二维码进行支付,利用特定的扫码软件,能够解析二维码中的内容.在我的项目中,用到了需要存储一个二维码的链接,让用户直接扫码以后就可以下单的需求.经过查询,可以用Google的qrcodegencore.jar的类库直接生成二维码.附件中是实现生成二维码的jar包接下来用两个步骤来实现此功能需求 1.生成二维码 import com.go

通过jquery-qrcode在线生成二维码

随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

PHP和Jquery生成二维码,以及PHP生成电子名片

自从跳槽了,就没有发过博客了,很愧疚,我是自学的PHP,现在这家公司加上老板才12个人,我是典型的从分工明确的公司跳槽到小公司,深刻体会到了所谓'大公司'和'小公司'的区别,上一个公司,一个项目到我这里,静态页都是写好的,我只需要将数据动态加载就行了,但是目前这个公司,典型的一个人当几个人用,我刚去公司一个多月,直接让我做项目经理的工作,去甲方公司需求调研,然后自己开发,除开设计和切图,我基本上都参与.锻炼人说实话还是小公司较好,但是锻炼技术我觉得还是大公司较好,因为我在我上一家公司呆了3个月,

java 生成 二维码 和jquery 生成二维码

生成二维码 Java 生成二维码: 思路为拿到jar 包知道里面的方法使用 Step one : 在https://github.com/zxing中下载(点击网页中名为 zxing 的a标签,跳转到源码页面,点击release 查看所有发布的源码,下载zip压缩文件 Step two:  解压文件后打开文件夹,将core包和javase包 中的com包拷贝到一java项目src目录下.右键导出 jar file  得到一个二维码开发的jar包 Step three: 进行二维码制作 impor

JavaScript的学习--生成二维码

有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. <script type="text/javascript"

利用vcard和qrcode.js生成二维码导入联系人

vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的交换 基本格式: BEGIN:VCARD N:姓;名;;; FN: 名 姓 TITLE:XX集团前端 ADR;WORK:;;北京市五环区GT路19号;;;; TEL;CELL,VOICE:159351111111 TEL;WORK,VOICE:010-6666666 URL;WORK:www.gt.