话不多说直接上代码

<!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. 再次重温《Right here waiting》

    记得高中时候听到这首曲子(当时还让同桌帮我抄了这首曲子,后来这个本子也不知道扔到哪里去了), 前天偶尔在虾米遇到这首曲子,过去的青涩岁月历历在目,自己手动打打歌词,一方面是为了重温这首曲子,另一方面, ...

  2. A - Shashlik Cooking CodeForces - 1040B

    http://codeforces.com/problemset/problem/1040/B Long story short, shashlik is Miroslav's favorite fo ...

  3. C和C指针小记(十八)-使用结构和指针-双向链表

    1.双链表 1.1 双向链表的声明 在一个双链表中,每个节点都包含两个指针--指向前一个节点的指针和指向后一个节点的指针. 声明 typedef struct NODE { struct NODE * ...

  4. InnoDB中锁的算法(1)

    Ⅰ.InnoDB锁算法的介绍 首先明确一点,锁锁住的是什么?锁锁住的是索引 Record Lock 单个行记录上的锁 Gap Lock 锁定一个范围,但不包含记录本身 Next-key Lock Ga ...

  5. 目标检测（六）YOLOv2__YOLO9000: Better, Faster, Stronger

    项目链接 Abstract 在该论文中,作者首先介绍了对YOLOv1检测系统的各种改进措施.改进后得到的模型被称为YOLOv2,它使用了一种新颖的多尺度训练方法,使得模型可以在不同尺寸的输入上运行,并 ...

  6. python 发送带附件的邮件

    特别注意的地方:filespart.add_header("Content-Disposition","attachment",filename=file_na ...

  7. 一个ping大包不通问题的解决过程

    1.问题描述 存在问题: 深圳的采集机MQ程序无法与应用服务器进行通讯,表现为:获取小数据时正常,获取大数据时超时 场景图如下 2.数据下载测试 使用SCP工具和FTP工具进行数据下载测试,主要是想排 ...

  8. Golang--匿名变量

    在使用多重赋值时,如果不需要在左值中接收变量,可以使用匿名变量(anonymous variable). 匿名变量的表现是一个下画线_,使用匿名变量时,只需要在变量声明的地方使用下画线替换即可.例如: ...

  9. 队列ADT

    队列 队列是FIFO表,使用队列时在队尾(rear)插入元素,称之为入队(enqueue),以及在对头(front)删除并返回元素值,称之为出队(dequeue). 任何表的实现都可以用于实现队列结构 ...

  10. Class_fourth

    动手动脑 1,多层异常捕捉一 2,多层异常捕捉二 3,EmbedFinally.java示例 最先截获的错误 最后输出finally 4, SystemExitAndFinally.java示例 如果 ...