说明：输入汉字和数字都可以识别并展示

<body>
<h2 id="h2">二维码生成</h2>
<br>
<span id="span"></span>
<p id="p"></p>

<br><br><br>
<div style="margin:20px 0;width: 90%;height: 400px;margin: auto">
<div class="easyui-panel" style="margin-top: 5px; height: 100%;border:hidden">
名称：<input type="text" name="textbox1" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 140.4px;"> 功能位号：
<input type="text" name="textbox2" placeholder="普通输入框"> 资产号：
<input type="text" name="textbox3" placeholder="普通输入框">
<!-- 设备号：<input type="text" name="textbox4" placeholder="普通输入框"> -->

<button type="button" onclick="print()">点击生成</button>

</div>
</div>
</body>
<script>

function print() {
var textbox1 = $('input[name="textbox1"]').val();
var textbox2 = $('input[name="textbox2"]').val();
var textbox3 = $('input[name="textbox3"]').val();
if(!textbox1) {
alert("待生成的页面不能为空");
} else {
var symHref = 'final.html?id=' + textbox1 + "?nsme=" + textbox2 + '?ns=' + textbox3;
window.open(symHref);
}

}
</script>

//获取参数，生成二维码
$(document).ready(function() {
var str = window.location.href; //取得整个地址栏
var num = str.indexOf("?")
str = str.substr(num + 1);
console.log(str); //id=1?nsme=2?ns=3
str = str.split('?');
console.log(str);
var e = str[0].split('=');
console.log(e);
var e1 = str[1].split('=');
var e2 = str[2].split('=');
//var qwe = e[1];
var qwe = decodeURI(e[1]);
var qwe1 = decodeURI(e1[1]);
var qwe2 = decodeURI(e2[1]);

$("#code1").html(qwe);
$("#code2").html(qwe1);
$("#code3").html(qwe2);

$("#qrcodeCanvas").qrcode({
render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text: "编码1：" + qwe + "\n" + "编码2：" + qwe1 + "\n" + "编码3：" + qwe2, //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
width: "400", //二维码的宽度
height: "400", //二维码的高度
background: "#ffffff", //二维码的后景色
foreground: "#000000", //二维码的前景色
src: 'img/3.png' //二维码中间的图片
});

});

//将二维码及说明信息生成图片并保存
function printPhoto() {

html2canvas(document.getElementById("imgBox"),{
onrendered: function(canvas) {
var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}

saveFile(imgURL,'filename.png');

}
});

}

最后生成的图片就是这样的啦！！！

源码下载地址：https://github.com/MrBaiYinL/qrcode

如果觉得能帮助到你，麻烦动动手点一个star。

使用qrcode输入信息生成二维码包含二维码说明信息，点击转化为图片并下载的更多相关文章

  1. Android之扫描二维码和根据输入信息生成名片二维码

    开发中常常遇到二维码扫码操作,前段时间做项目要实现该功能,于是网上查找资料实现了,现在把他做出来给各位分享一下,主要包含了二维码扫描和生成二维码名片. 先来看看效果图:   生成的二维码,打开微信扫一 ...

  2. jquery.qrcode.min.js生成二维码 通过前端实现二维码生成

    主体代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <tit ...

  3. qrcode.js 动态生成二维码

    用qrcode.js动态生成二维码图片非常简单,只需要引入qrcode.js即可使用,而且可以自定义图片大小.背景色等信息. 1.jsp代码---页面头部引入qrcode.js,jquery文件可选 ...

  4. 如何使用jquery.qrcode.js插件生成二维码

    1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...

  5. jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...

  6. jquery.qrcode.min.js生成二维码

    jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <scr ...

  7. asp.net 生成、解析条形码和二维码

    原文 asp.net 生成.解析条形码和二维码 一.条形码 一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备扫描就可以获得书籍的ISBN(Intern ...

  8. 使用javascript生成当前博文地址的二维码图片

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  9. 免费在线生成彩色带logo的个性二维码

          码工具网站提供免费的在线二维码生成服务,可以把网址.文本.电子邮件.短信.电话号码.电子名片.wifi网络等信息生成对应的二维码图片.你可以设置二维码图片的格式(png,jpg,gif). ...

随机推荐

  1. POJ 1426 - Find The Multiple - [DP][BFS]

    题目链接:http://poj.org/problem?id=1426 Given a positive integer n, write a program to find out a nonzer ...

  2. 《Maven实战》文字版[PDF]

    从亚马逊买的电子书,导出来的,需要的下吧. 下面是截图: 除了代码部分有一点点不清楚之外,其他还是蛮清楚的. 下载地址: http://download.csdn.net/download/apple ...

  3. vue问题大全

    什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写.mvvm 是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View ...

  4. iOS系统NSNotificationCenter中的常用通知名称

    //音频 AVF_EXPORT NSString *const AVAudioSessionInterruptionNotification //音频中断出现 AVF_EXPORT NSString ...

  5. 关于STM32时钟系统

    初学STM32,感觉最蛋疼的是它的时钟系统,每次看到它的那个时钟树就有点晕,虽然看了很多这方面的资料,甚至也已经写过很多STM32的模块代码,做过一些小项目,但一直还是对这一块模模糊糊,似懂非懂,所以 ...

  6. Mac 启动或者禁用翻盖自动开关机

    从 2016 新款 MacBook Pro 起,预设打开笔电上盖或连接电源供应器时,电脑就会自动开机而且开机时没有启动声,本文教你如何将这些东西调整回原本的样子. 以下指令都是通过「应用程序」→「终端 ...

  7. PTA地下迷宫探索

    地道战是在抗日战争时期,在华北平原上抗日军民利用地道打击日本侵略者的作战方式.地道网是房连房.街连街.村连村的地下工事,如下图所示. 我们在回顾前辈们艰苦卓绝的战争生活的同时,真心钦佩他们的聪明才智. ...

  8. Jmeter使用之-断言

    添加响应断言 ,一般下面这样选择断言的设置就可以了 个人习惯是直接从响应数据中直接复制正确的接口返回值到断言的测试模式中,如下          !!!但是这样复制的是有问题的 ,需要在测试模式中去掉 ...

  9. AppUtil

    import java.io.File;import java.util.ArrayList;import java.util.LinkedHashMap;import java.util.List; ...

  10. group_concat的使用

    1.场景 仓库使用系统实现了先进先出,给仓库的备货单原先设计如下模式: tx3表: 不同的批次分开行显示,仓库从这个备货单可以知道这个货品需要备货哪些批次,多少数量 用了几天,仓库对此备货单样式提出如 ...