canvas教程

使用jquery-qrcode生成二维码

字号+ 作者:H5之家 来源:H5之家 2017-08-16 14:01 我要评论( )

使用jquery-qrcode生成二维码 一、使用jquery-qrcode生成二维码 先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery

一、使用jquery-qrcode生成二维码

先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取),

qrcode.js 是实现二维码数据计算的核心类,

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

 

支持的功能主要有:

 

  •  

     

    使用方式非常简单

     

  •  

     经过简单实践,

     

    使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器,所以需要自行优化一下渲染table的方式,这里就不细述了。

     

    二、JS生成中文二维码

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

    这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,

    而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,

    英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。

    解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

     

     

    参考:

    https://github.com/jeromeetienne/jquery-qrcode

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 人人都要学会使用的ES6语法与技巧

      人人都要学会使用的ES6语法与技巧

      2017-08-15 17:03

    • html5教程_教你使用HTML5画布(canvas)生成阴影效果

      html5教程_教你使用HTML5画布(canvas)生成阴影效果

      2017-08-14 12:05

    •  微信小程序小技巧系列《十一》canvas中的save和restore,view使用bindtap传值

      微信小程序小技巧系列《十一》canvas中的save和restore,view使用bi

      2017-08-12 10:00

    • HTML5 Canvas API中drawImage()方法的使用实例

      HTML5 Canvas API中drawImage()方法的使用实例

      2017-08-09 11:01

    网友点评
    l