小码二维码助手-微信运营神器，在线生成二维码

最近在做微信公众号的时候，发现二维码是个神奇的东西，可以装下很多东西，文本、链接、名片等等，激发了我coding的兴趣，好久没写代码的我开始研究了下这个二维码的机制。

无意之中发现现在有很多二维码在线生成的网站，比如草料二维码，微信二维码等等；但是这些网站会有各种问题不让用户完整的使用，可能是因为政策、利益等因素吧。

自己就突发奇想，我自己能不能做一个这样的小工具呢？于是各种资料搜集，最后选中了两个前端开发的工具用来制作一个二维码在线生成的工具，在此把我痛苦的过程记录下来：

首先，我过滤了下使用的插件：

1.SUI Mobile-因为我想要开发一个适配移动端的页面，所以选择了这个

主页：http://m.sui.taobao.org/

自述：轻量、小巧、精美的UI库，方便迅速搭建手机H5应用，也非常适合开发跨平台Web App。

开发团队：阿里巴巴共享业务事业部UED团队

Github：https://github.com/sdc-alibaba/SUI-Mobile

Demo：http://m.sui.taobao.org/demos/

兼容：兼容到 iOS 6+ 以及 Android 4.0+

基于 Framework7 进行开发，并参考 Ratchet、Fastclick 开源库。

我用这个淘宝团队开发的移动端样式库开发了一个简单的页面：

小码二维码助手-微信运营神器，在线生成二维码

2.jquery.qrcode.js 一个二维码生成的Js插件

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code.

github地址，https://github.com/jeromeetienne/jquery-qrcode

这个二维码生成的插件一开始使用了官网的demo；

1).jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）,我这里为了能够保存图片使用了canvas的方式；

jQuery(‘#output1’).qrcode({render:”canvas”,text:content});

2).这样扫描可以使用了，但是中文会无法显示，

其实上面的js有一个小小的缺点，就是默认不支持中文。

这跟js的机制有关系，jquery-qrcode这个库是采用 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;

}

参考：http://www.cnblogs.com/xcsn/archive/2013/08/14/3258035.html

现在中文可以正常显示了，下面是一个文本的二维码演示图：

小码二维码助手-微信运营神器，在线生成二维码

3).现在要开始想办法存储图片了，默认的canvas可以直接在PC端右键保存图片，

要在手机端显示就要将canvas转化为图片格式，由于我qrcode插件的canvas是动态生成的，所以我要动态获取这个canvas控件的对象，记住如果你的页面可能会有多个canvas控件一定要

var myCanvas = $('.abc');var src = myCanvas[0].toDataURL("image/png");

因为第一行代码获取的可能是个数组对象；

4).这样改了之后手机测试发现保存图片手机无法识别，原来是toDataURL("image/png")图片格式的问题，我要实现的是方便我直接长按保存图片，发现canvas还支持jpeg格式转化，就尝试了下

var image = myCanvas[index].toDataURL("image/jpeg").replace("image/png", "image/octet-stream");

然后将默认的动态canvas隐藏掉，动态添加一个img标签，src里插入生成的image base64编码的数据，设置居中。

这样当长按我动态添加的img标签二维码时就弹出了保存图片的提示了。

小码二维码助手-微信运营神器，在线生成二维码到此，小码二维码助手就实现了简单的文本和网址二维码的功能了，喜欢的朋友可以收藏下哦，二维码助手在我的公众号：wxdroid，里有，关键是我不以盈利为目的，纯粹个人爱好。

微码农（wxdroid） 一个码农的微信之路。