利用jquery.qrcode.js生成二维码和logo居中的图片 js生成二维码
在项目中经常需要用到二维码的地方，如果都用服务器端生成的话就会很消耗资源。于是，直接通过JavaScript直接在客户端生成，有效减少带宽，以及维护成本。
之前我介绍过用jquery.qrcode.js生成二维码的方法，这里是需要在生成二维码的中间加上logo。并且右键保存是一张图。
前往 如何用jquery.qrcode.js插件在线生成二维码
官网上的 qrcode.js 文件里没有实现中文的支持和LOGO的添加，现在我们将这个文件修改为jquery.qrcode.js文件了。
此外还需要一个对中文进行转码的文件，该文件为utf.js。然后在jquery.qrcode.js 文件中调用了utf.js 文件的 utf16to8(str)方法对其中文进行了转码。
下面是我写的一个示例，该示例需要的js文件有jquery.qrcode.js和utf.js以及jquery-1.8.0.js 。还有一个LOGO图片可点击下载文件。
文件下载地址：
链接: https://pan.baidu.com/s/1eRT2JGe 密码: gm28
调用的html代码如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <me
ta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <ti
tle>该二维码支持中文和LOGO</ti tle> - <script type="text/javascript" src="jquery-1.8.0.js"></script>
- <script type="text/javascript" src="utf.js"></script>
- <script type="text/javascript" src="jquery.qrcode.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#qrcodeCanvas").qrcode({
- render : "canvas" //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
- text : "高蒙博客" //扫描二维码后显示的内容可以直接填一个网址，扫描二维码后自动跳向该链接
- width : "200" //二维码的宽度
- height : "200" //二维码的高度
- background : "#ffffff" //二维码的后景色
- foreground : "#000000" //二维码的前景色
- src: 'photo.jpg' //二维码中间的图片
- });
- });
- </script>
- </head>
- <body>
- <center>
- <h2>该二维码支持中文和LOGO</h2>
- <div id="qrcodeCanvas"></div>
- </center>
- </body>
- </html>
以上就是利用jquery.qrcode.js生成二维码和logo居中的图片，并且右键保存是一张图。
发表评论
