使用qrcode輸入信息生成二維碼包含二維碼說明信息，點擊轉化爲圖片並下載

時間 2019-11-21

標籤使用 qrcode 輸入信息生成二維包含說明點擊轉化圖片下載欄目二維碼简体版

原文原文鏈接

說明：輸入漢字和數字均可以識別並展現html

<body>
<h2 id="h2">二維碼生成</h2>
<br>
<span id="span"></span>
<p id="p"></p>git

<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="普通輸入框">
github

<button type="button" onclick="print()">點擊生成</button>canvas

</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]);ui

$("#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' //二維碼中間的圖片
});spa

});3d

//將二維碼及說明信息生成圖片並保存
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');

}
});

}