1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

使用jquery.qrcode,在线生成二维码,支持中文,可设置LOGO版!【JS版】

小川 前端
查看演示  

jquery.qrcode,在线生成二维码教程:

需要查看演示效果,在线生成自己的二维码!

请托动到最下方:

点击【查看演示】按钮,即可通过本案例自动生成你想要的二维码!

点击【立即下载】按钮,即可下载案例的源码!


【方案一】:使用jquery.qrcode,在线生成二维码

<!-- 演示 start -->
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.function.js"></script>
<script type="text/javascript">
$(function(){
  var str = "http://www.youhutong.com";
  $("#code").qrcode({
      render : "canvas",     //设置渲染方式,table和canvas【推荐canvas】
      text : str,            //扫描二维码后显示的内容(如果是网址将跳向该链接网址)
      width : "300",         //二维码的宽度
      height : "300",        //二维码的高度
      background : "#fff",   //二维码的后景色
      foreground : "#000",   //二维码的前景色
      src: 'logo.jpg'        //二维码中间的图片
  });
  
  $("#sub_btn").click(function(){
    $("#code").empty();
    var str = utf16to8($("#content").val());
    $("#code").qrcode({
        render : "canvas",   //设置渲染方式,table和canvas【推荐canvas】
        text : str,          //扫描二维码后显示的内容(如果是网址将跳向该链接网址)
        width : "300",       //二维码的宽度
        height : "300",      //二维码的高度
        background : "#fff", //二维码的后景色
        foreground : "#000", //二维码的前景色
        src: 'logo.jpg'      //二维码中间的图片
    });
  });
})
</script>

<div id="main">
   <div class="demo">
   		<p>请输入内容然后点击按钮生成二维码:</p>
      <p>
      <input type="text" class="input" id="content" value=""><br/>
      <input type="submit" id="sub_btn" value="立即生成二维码" style="height:35px; width:200px; background:#1abc9c; color:#fff;" />
      </p>
   		<div id="code"></div>
   </div>

   <br/><div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
</div>
<!-- 演示 end -->

说明:

本次用到了3个文件和1张图片:

0、jquery.js文件

1、jquery.qrcode.min.js文件

2、jquery.qrcode.function.js文件

3、logo.jpg图片


【方案二】:还有一种就是:使用PHPqrcode类库,在线生成二维码【PHP版】

可以站内搜索:PHPqrcode查看教程


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
立即下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
如果你觉得这篇教程的内容对你有帮助、请支持本站谢谢!  点击进入捐赠通道

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/66.html

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情