专注JavaWeb开发 首页制式『默认式 OR 时间轴 网站地图|RSS订阅|设为首页|加入收藏
当前位置:首页 >前端 >jQuery > 正文

JS生成二维码 (含图片与汉字)

作者: 紫寒1120 发布时间: 2016-12-01 浏览次数:

基于Js生成二维码,Demo实例 

二维码生成demo.rar

<!doctype html>
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>该二维码支持中文和LOGO</title>
  
  <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="../js/utf.js"></script>
 <script type="text/javascript" src="../js/jquery.qrcode.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
         $("#qrcodeCanvas").qrcode({
            render : "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
            text : "www.javaweb1024.com",    //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
             width : "200",               //二维码的宽度
            height : "200",              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000",        //二维码的前景色
            src: 'http://www.javaweb1024.com/uploads/1/image/public/201502/20150227152230_mdn8sej04t.jpg'//二维码中间的图片
        });

		 $("#zihan").qrcode({
            render : "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
            text : "专注JavaWeb开发",    //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
             width : "200",               //二维码的宽度
            height : "200",              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000",        //二维码的前景色
            src: ''//二维码中间的图片
        });
     });
 </script>
 
 </head>
 <body>
     <center>
       <h2>该二维码支持中文和LOGO</h2>
       <div id="qrcodeCanvas"></div>
		<hr/>
		 <div id="zihan"></div>

    </center>
</body>
</html>

生成的二维码如下


QQ群: 武汉地区(142173356)验证消息JavaWeb1024

网友共有【】评论,点击查看



x 微信关注我们 随时获取最新网站资讯