生成简易二维码
现在二维码越来越流行啦,支付扫二维码,关注扫二维码,抽奖扫二维码......,总之,二维码无处不在,那怎么制作一个二维码呢?我们今天就此问题一起来讨论一下
一、什么是二维码
首先我们来了解一下,什么是二维码?百度百科上是这样解释的:二维条码/二维码(2-dimensional bar code)是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理:它具有条码技术的一些共性:每种码制有其特定的字符集;每个字符占有一定的宽度;具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
二、具体实现
1、支持的功能主要有:
text : " / " //设置二维码内容
render : "canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel : 0,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
2、使用方式非常简单
当你分别执行了上面的例子,就可以看到,二维码使用canvas画出来,在网页上输出一个canvas节点。但是用到table的话,我们会发现二维码实际是使用table表格把每一个二维码的点画出来,这就导致网页上的Dom元素会特别多。
选择canvas,ie8一下的浏览器就没办法支持。选择table吧,一切看起来都很美好。但在实际使用的过程中,当二维码的内容较多时,二维码的尺寸较小时(比如120px * 120 px),用table来渲染,会发现生成的二维码很难识别。
作为移动端开发者,现代的智能机基本上都支持canvas,那我们就用canvas默认不支持中文。
这跟js这个库是采用 charCodeAt() 这个方式进行编码转换的,而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。
解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:
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;
}
现在中文生成二维码解决了,但是!!!你生成的二维码在canvas里,怎么保存在本地呢?很简单,把canvas里的信息转换成img图片就行了。
// 从canvas提取图片image
function convertCanvasToImage(canvas){
//新Image对象,可以理解为DOM;
var image = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL
image.src = canvas.toDataURL("image/png");
return image;
}
三、完整示例:
html:
生成简易二维码
js:
DEMO演示:
电话咨询
在线咨询
微信咨询