`

JQ插件:qrcode生成二维码

阅读更多
jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)



导入包:
<script type="text/javascript" src="js/jquery.qrcode.js"></script>


在html中加入一个div用于显示二维码
<div id="qrcode"></div>


JS代码:
var options = {
		render: 'div',//设置渲染方式canvas/table
		ecLevel: 'L',
		background: '#FFF',
		text: QR,//设置二维码内容
		size: parseInt($("#qrcode").width(), 10)*0.7,
		mSize: 0.1,
		mPosX: 0.5,
		mPosY: 0.5,
		label: 'no label',
		fontname: 'sans',
		fontcolor: '#FFF'
	};
	$("#qrcode").empty().qrcode(options);


渲染方式写成div似乎也可以。

在设置二维码内容时,如果是中文,需要使用utf16to8(str)转换一下:
/* utf.js - UTF-8 <=> UTF-16 convertion
 *
 * Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
 * Version: 1.0
 * LastModified: Dec 25 1999
 * This library is free.  You can redistribute it and/or modify it.
 */

/*
 * Interfaces:
 * utf8 = utf16to8(utf16);
 * utf16 = utf16to8(utf8);
 */

function utf16to8(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;
}

function utf8to16(str) {
    var out, i, len, c;
    var char2, char3;

    out = "";
    len = str.length;
    i = 0;
    while(i < len) {
	c = str.charCodeAt(i++);
	switch(c >> 4)
	{ 
	  case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
	    // 0xxxxxxx
	    out += str.charAt(i-1);
	    break;
	  case 12: case 13:
	    // 110x xxxx   10xx xxxx
	    char2 = str.charCodeAt(i++);
	    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
	    break;
	  case 14:
	    // 1110 xxxx  10xx xxxx  10xx xxxx
	    char2 = str.charCodeAt(i++);
	    char3 = str.charCodeAt(i++);
	    out += String.fromCharCode(((c & 0x0F) << 12) |
					   ((char2 & 0x3F) << 6) |
					   ((char3 & 0x3F) << 0));
	    break;
	}
    }

    return out;
}


参考:
https://github.com/jeromeetienne/jquery-qrcode
  • 大小: 75.6 KB
分享到:
评论
1 楼 zgycgc 2016-07-09  
    

相关推荐

    jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO

    **jQuery.qrcode.js** 是一个基于JavaScript的库,专门用于在客户端生成二维码(Quick Response Code)。这个库的优势在于它不需要服务器端的支持,只需要在用户的浏览器上运行,这大大简化了生成二维码的过程,并...

    jq插件生成二维码

    "jq插件生成二维码"是指利用jQuery这一流行的JavaScript库来创建自定义的二维码。jQuery简化了DOM操作,使得在网页上动态生成和展示二维码变得更加便捷。 jQuery QRCode是一个实用的jQuery插件,它允许开发者通过...

    jq前端实现生成二维码

    `jq`通常指的是jQuery,一个广泛使用的JavaScript库,而本示例是利用jQuery与`QRcode.js`插件来实现二维码的生成。`QRcode.js`是一个轻量级的JavaScript库,能够帮助开发者在网页上创建出包含各种数据的二维码,包括...

    html5+jquery.qrcode前端生成二维码海报

    html5+jquery.qrcode前端生成二维码海报 废话不多说直接上代码 需要使用的JS插件 &lt;script src="js/jquery-2.1.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.qrcode.min.js"&gt;&lt;/script&gt;

    jquery.qrcode.js二维码生成插件并且转换成图片demo

    然后,你可以选择一个DOM元素,比如一个div,作为二维码的容器,并通过jQuery调用`.qrcode()`方法来生成二维码: ```javascript $("#qrcode").qrcode({ text: "http://example.com", // 你想生成的二维码内容 ...

    jq生成二维码.zip

    其次,`jquery.qrcode.js`是一个jQuery插件,专门用于生成二维码。这个插件扩展了jQuery的功能,使得在页面上创建二维码变得简单。我们可以通过调用jQuery对象的`.qrcode()`方法来生成二维码,该方法接受一个配置...

    jq生成二维码插件

    这个“jq生成二维码插件”是为了解决网页上生成二维码的需求而设计的。二维码,全称Quick Response Code,是一种二维条码,能够存储大量的数据,如网址、文本、联系方式等,用户通过手机扫描即可快速获取信息,广泛...

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

    **jQuery QRCode插件生成二维码详解** 在当前的数字化时代,二维码已经成为传递信息的重要载体,尤其是在移动设备上,用户可以通过扫描二维码快速访问网页、下载应用、获取优惠券等。jQuery QRCode是一个轻量级的...

    jquery生成二维码

    总的来说,通过jQuery和`jquery-qrcode`插件,我们可以轻松地在网页上生成二维码,结合CSS和额外的JavaScript,还可以实现更复杂的功能,如添加LOGO和保存为图片。这为网页应用提供了丰富的互动性和实用性。

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中。Jquery.Qrcode主要包括以下...

    使用jquery插件qrcode生成二维码

    然后,使用转换后的字符串生成二维码: ```javascript var str = toUtf8("软件开发网!"); $('#code').qrcode(str); ``` 通过这种方式,你可以在网页上轻松创建包含中文内容的二维码。尽管网络上有许多生成二维码的...

    简单jQuery生成二维码

    然后,在JavaScript部分,我们可以使用jQuery选择器获取到这个元素,并调用`.qrcode()`方法来生成二维码: ```javascript $("#qrcode").qrcode({ text: "这是你要转换的中文字符串", // 要转换成二维码的内容 ...

    Jquery插件生成二维码

    这里提到的"JQ生成二维码",通常指的是`jquery-qrcode`插件。这个插件允许我们在jQuery环境中轻松地创建二维码,并且可以自定义二维码的样式和内容。 1. **安装jQuery和jquery-qrcode插件** 在开始之前,确保你的...

    qrCoder生成二维码图片分享到朋友圈和在线打印二维码

    2、jquery.qrcode.min.js :生成二维码插件 3、jquery.jqprint-0.3.js:打印插件 功能简介: 根据输入内容,在线生成二维码,可转换成图片,分享到朋友圈。支持网页在线打印二维码。 代码量少,易于理解,学习!

    使用jquery组件qrcode生成二维码及应用指南

    【使用jQuery组件qrcode生成二维码】 在Web开发中,生成二维码是一种常见的需求,尤其是在移动互联网时代,二维码可以方便地引导用户快速访问特定网址或者传递信息。jQuery组件qrcode提供了一个简单的方法来实现在...

    jquery实现生成二维码带logo的那种

    这里推荐使用`jquery-qrcode`库,它是一个jQuery插件,可以方便地在网页上生成二维码。要使用这个库,你需要在项目中引入jQuery和`jquery-qrcode`的JavaScript文件。通常,你可以通过CDN链接获取这些资源,或者将其...

    jquery插件qrcode在线生成二维码

    1、借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维码; 缺点:变更二维码的维护略显麻烦 2、在后端...

    jquery生成二维码demo

    对于“jQuery生成二维码”,我们通常会借助第三方插件,例如`jquery.qrcode.js`。这个插件允许开发者在网页中方便地创建二维码。要使用这个插件,首先需要将其下载并引入到项目中,或者通过CDN链接进行引用。例如,...

    基于jQuery生成二维码,需引用js文件

    在这个例子中,`$("#qrcode-container")`是CSS选择器,用于选取页面上某个元素,比如一个id为"qrcode-container"的div,`qrcode()`函数则是`jquery-qrcode`提供的方法,用于在选中的元素内生成二维码。 值得注意的...

    使用jquery.qrcode生成彩色二维码实例

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式。(jquery.qrcode.js 设置显示方式为table时在...JS生成二维码&lt;/title&gt; [removed]&lt;/script

Global site tag (gtag.js) - Google Analytics