话不多说直接上代码

<!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. C语言面试笔记（8/26）

    在32位的机器环境下,char.short.int.float.double这样的内置数据类型sizeof值的大小分别为1,2,4,4,8: C++标模板库(standard Template Lib ...

  2. 渗透常用dos命令，http协议及数据提交方式。 hack 某某

    dir查看目录 cd 切换目录 strat www.xxx.com   打开网页 del 删除文件 cls 清屏幕命令 ipconfig  查看ip地址 netstat -an   显示网络连接.路由 ...

  3. [07-01]http网页提示含义

    出现较多的一些网页代码提示的意思: 100 - 继续. 101 - 切换协议. 110 重新启动标记答复. 120 服务已就绪,在 nnn 分钟后开始. 125 数据连接已打开,正在开始传输. 150 ...

  4. RoR - Advanced Querying

    Seeding the Database: db/seed.rb 可以提供预设data rake db:seed #seeds.rb Person.create! [ {first_name : &q ...

  5. nvm 安装使用

    事先说明-------先安装nvm,再安装nodejs [nvm参考安装地址] nvm install 6.9.4 # 安装nodejs6.9.4版本 nvm use 6.9.4 # 使用nodejs ...

  6. JDK 1.8 JVM的变化

    前言: 1.什么是JVM JVM的全称是 Java Virtual Machine(Java虚拟机),它通过模拟一个计算机来达到一个计算机所具有的功能. Java和实体计算机一样也必须有一套合适的指令 ...

  7. GitHub学习总结

    一.安装git:下载Git,官网地址:https://git-scm.com/,进入官网首页,然后点击download,下载对应系统的git就行. 二.我用的是win系统,打开git界面是这样的: 在 ...

  8. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  9. sublime----------快捷键的记录

    1.鼠标选中多行,按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行: 2.鼠标选中自定义的多行,ctrl+鼠标左键

  10. Java-HttpURLConnection详细说明与实例

    URLConnection 类是一个抽象类,代表应用程序和URL之间的通信连接,此类的实例可用于读取和写入此URL引用的资源.URLConnection 允许使用GET,POST或者其他HTTP方法请 ...