话不多说直接上代码

<!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.11.1.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">

        var btn = function () {

            $("#qrcodeCanvas").qrcode({

                render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好

                text: "编码：" + $("#ww").val() + "\n" + "编码：" + $("#ww1").val(), //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接

                width: "400", //二维码的宽度

                height: "400", //二维码的高度

                background: "#ffffff", //二维码的后景色

                foreground: "#000000", //二维码的前景色

                src: 'img/1.jpg' //二维码中间的图片

            });

        }

    </script>

</head>

<body>

    <center>

        <div id="" style="float: left;">

            编码：

            <input id="ww" type="text" /><br/>

            编码：

            <input id="ww1" type="text" /><br/>

            <input type="button" name="" id="btn" onclick="btn()" value="点击生成" style="width: 150px;height: 50px;border: none;" />

        </div>

        <div id="qrcodeCanvas" style="float: left;"></div>

    </center>

</body>

</html>

效果图如下：

代码已打包，下载地址为：https://download.csdn.net/download/cnmcncocm/10589108

gitHub地址：https://github.com/MrBaiYinL/qrcode；如果对你有帮助，麻烦点个star

在input中输入需要的数据，使用qrcode，点击生成二维码的更多相关文章

  1. Laravel5中通过SimpleQrCode扩展包生成二维码实例

    Simple Qrcode是基于强大的Bacon/BaconQrCode库开发的针对Laravel框架的封装版本,用于在Laravel中为生成二维码提供接口. 安装SimpleQrCode扩展包 在项 ...

  2. C# 动态创建SQL数据库（二） 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示，编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求

    C# 动态创建SQL数据库(二) 使用Entity Framework  创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...

  3. iOS中 扫描二维码/生成二维码详解 韩俊强的博客

    最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: se ...

  4. java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

    最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...

  5. iOS中 扫描二维码/生成二维码具体解释 韩俊强的博客

    近期大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: se ...

  6. 使用qrcode输入信息生成二维码包含二维码说明信息，点击转化为图片并下载

    说明:输入汉字和数字都可以识别并展示 <body> <h2 id="h2">二维码生成</h2> <br> <span id= ...

  7. C#生成二维码，把二维码图片放入Excel中

    /// <summary> /// 把图片保存到excel中 /// </summary> /// <param name="excelFilePath&quo ...

  8. 二维码相关---java生成二维码名片,而且自己主动保存到手机通讯录中...

    版权声明:本文为博主原创文章,未经博主credreamer 同意不得转载 违者追究法律责任. https://blog.csdn.net/lidew521/article/details/244418 ...

  9. 在java中生成二维码，并直接输出到jsp页面

    在java中生成的二维码不存到磁盘里要直接输出到页面上,这就需要把生成的二维码直接以流的形式输出到页面上,我用的是myeclipse 和 tomcat 它的原理是:在加载页面时,根据img的src(c ...

随机推荐

  1. SQL执行计划解读

    声明 5.6中desc看不到show warnings,也看不到filtered列 5.7的desc等于5.6的desc extended,这样可以看show warnings,5.6中filtere ...

  2. intellij idea 的全局搜索快捷键方法

    1.Ctrl+N按名字搜索类 相当于eclipse的ctrl+shift+R,输入类名可以定位到这个类文件,就像idea在其它的搜索部分的表现一样,搜索类名也能对你所要搜索的内容多个部分进行匹配,而且 ...

  3. 17.3-uC/OS-III消息管理（消息队列使用）

    多值信号量和和互斥信号量主要用来标志事件是否发生和协调资源的访问.如果要给资源赋予内容进行传递, 信号量就力有所不及了.这时候就需要用到 uC/OS 操作系统的另一个内核机制了,那就是消息队列. 2. ...

  4. JavaScript 模拟 Dictionary

    function Dictionary() { var items = {}; //判断是否包含Key值 this.has = function(key) { return key in items; ...

  5. js 获取时区

    js的时区函数: 设datename为创建的一个Date对象 ====================datename.getTimezoneOffset()--取得当地时间和GMT时间(格林威治时间 ...

  6. RedHat7.之.图形化切换

    RedHat7.之.图形化切换 从黑窗口(纯指令输入界面)切换到图形化界面,使用root用户执行指令:startx 指令:startx 如有问题,欢迎纠正!!! 如有转载,请标明源处:https:// ...

  7. Dubbo分布式服务框架

    Dubbo (开源分布式服务框架) 编辑 本词条缺少信息栏,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! Dubbo是 [1]  阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高 ...

  8. 爬虫出现Forbidden by robots.txt（转载 https://blog.csdn.net/zzk1995/article/details/51628205）

    先说结论,关闭scrapy自带的ROBOTSTXT_OBEY功能,在setting找到这个变量,设置为False即可解决. 使用scrapy爬取淘宝页面的时候,在提交http请求时出现debug信息F ...

  9. day03 Python字典dict的增删查改及常用操作

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.python对key进行哈希函数运算,根据计算的结果决定value的存储地址,所以字典是无序存储的,且key必须是可 ...

  10. RocketMQ使用笔记

    apache rocketmq document : http://rocketmq.apache.org/community/ rocketmq 工具下载地址:https://github.com/ ...