登录

利用jquery.qrcode.js生成二维码和logo居中的图片 js生成二维码

jQuery/js 热门
5 491

在项目中经常需要用到二维码的地方,如果都用服务器端生成的话就会很消耗资源。于是,直接通过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代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>该二维码支持中文和LOGO</title>  
  6.   
  7. <script type="text/javascript" src="jquery-1.8.0.js"></script>  
  8. <script type="text/javascript" src="utf.js"></script>  
  9. <script type="text/javascript" src="jquery.qrcode.js"></script>  
  10. <script type="text/javascript">  
  11.     $(document).ready(function() {  
  12.         $("#qrcodeCanvas").qrcode({  
  13.             render : "canvas"      //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好  
  14.             text : "高蒙博客"      //扫描二维码后显示的内容可以直接填一个网址,扫描二维码后自动跳向该链接  
  15.             width : "200"          //二维码的宽度  
  16.             height : "200"         //二维码的高度  
  17.             background : "#ffffff" //二维码的后景色  
  18.             foreground : "#000000" //二维码的前景色  
  19.             src: 'photo.jpg'        //二维码中间的图片  
  20.         });  
  21.     });  
  22. </script>  
  23.   
  24. </head>  
  25. <body>  
  26.     <center>  
  27.       <h2>该二维码支持中文和LOGO</h2>  
  28.       <div id="qrcodeCanvas"></div>  
  29.     </center>  
  30. </body>  
  31. </html>

以上就是利用jquery.qrcode.js生成二维码和logo居中的图片,并且右键保存是一张图。

11

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传,对此类作品本站仅提供交流平台,不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。 本网站所提供的信息,只供参考之用。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误,对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内,本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。

发表评论

5 个回复