话不多说直接上代码

<!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快速删除U8账套

    一.问题提出 通过"系统管理"来删除999账套,首先要求你备份然后才能删除.头痛的是: 1)备份需要发费很长的时间,特别是账套数据文件比较大时. 2)备份时,你的本本基本处于死机状 ...

  2. LIBS入门

    样品汽化产生自由原子,原子电子的激发诱导光辐射产生表征原子的分立光谱,采集和分析光辐射. 光源:1064nm Nd:YAG固态激光器,10ns脉冲,焦点光密度1 GW·cm−2 可见和紫外光源.   ...

  3. react中进入某个详情页URL路劲参数Id获取问题

    <Route path={`${match.url}/detail/:id`} component={AppManageAddDetail} /> const { match:{param ...

  4. day5_函数的参数

    http://www.nnzhp.cn/archives/154 一.函数在调用的时候,可以传入参数,有形参和实参 形参: 形参变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元 ...

  5. 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换

    1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...

  6. ORA-00444: background process DBRM failed while starting

    SQL> startup 报错:ORA-00444: background process DBRM failed while startingORA-00020:maximum number ...

  7. JMeter上架标的（yyb-csg）

    yyb-csg 1.登录时一直提示用户名不能为空,可是明明已经传值了呀 解决:添加cookie管理器 2.怎么获取到待受理的项目, 在python脚本的实现过程中发现,在平台受理一步中传的lid值就是 ...

  8. pytorch预训练模型的下载地址以及解决下载速度慢的方法

    https://github.com/pytorch/vision/tree/master/torchvision/models 几乎所有的常用预训练模型都在这里面 总结下各种模型的下载地址: 1 R ...

  9. 百度富文本Ueditor编辑器的使用

    往在web开发的时候,尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率 UEditor官网下载地址:https:// ...

  10. Hbase 系统架构(zhuan)

    一.系统架构 客户端连接hbase依赖于zookeeper,hbase存储依赖于hadoop client: 1.包含访问 hbase 的接口, client 维护着一些 cache(缓存) 来加快对 ...