话不多说直接上代码

<!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. Selenium 3----控制浏览器操作

    控制浏览器窗口大小 eg:将浏览器设置成移动端大小(480*800),进行访问 set_window_size()方法: from selenium import webdriver driver=w ...

  2. 双系统Windows时间不同步的解决办法

    步骤:打开C盘>Windows>System32,找到cmd.exe,右键以管理员的身份运行. Reg add HKLM\SYSTEM\CurrentControlSet\Control\ ...

  3. [Database.System.Concepts(6th.Edition.2010)].Abraham.Silberschatz. Ch8学习笔记

    Database Ch8.relational design 8.1 features of good design 8.1.1 larger alternatives why design is g ...

  4. hive on spark配置

    1.安装java.maven.scala.hadoop.mysql.hive 略 2.编译spark ./make-distribution.sh --name "hadoop2-witho ...

  5. MAC OSX Xcode硬盘清理

    1.移除对旧设备的支持影响:可重新生成:再连接旧设备调试时,会重新自动生成.我移除了4.3.2, 5.0, 5.1等版本的设备支持.路径:~/Library/Developer/Xcode/iOS D ...

  6. JAVA-数据库之MySQL与JDBC驱动下载与安装

    相关资料:<21天学通Java Web开发> MySQL下载地址:https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.19-wi ...

  7. java框架之Spring(1)-入门

    介绍 概述 Spring 是一个开放源代码的设计层面框架,它解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring 是于 2003 年兴起的一个轻量级的 J ...

  8. 免费的文件比较工具和beyondcomare和source insight的比较工具

    Linux下,meld就够了,命令行用用diff也行,kdiff3也不错. 参考 http://www.cnblogs.com/itech/archive/2009/08/13/1545344.htm ...

  9. 台式电脑、笔记本快捷选择启动项Boot 快捷键大全

    我们在安装系统时,会去设置电脑是从硬盘启动.U盘启动.光驱启动.网卡启动. 一般设置的方法有两种:一种是进BIOS主板菜单设置启动项顺序:另一种就是我在这里要介绍的快捷选择启动项. 以下是网友整理的各 ...

  10. c#XML转换成实体

    首选:我的XML文件如下(mysql表里导出的):几千条,就选2条做例子. <?xml version="1.0" encoding="utf-8" ?& ...