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

 jQuery/js   高蒙   阅读(4374)   评论(2)   2017-10-29 16:55:51    二维码 jquery jquery.qrcode.js logo 


在项目中经常需要用到二维码的地方,如果都用服务器端生成的话就会很消耗资源。于是,直接通过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.jsutf.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>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>该二维码支持中文和LOGO</title>  
  
<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居中的图片,并且右键保存是一张图。





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客