js 生成二维码并点击下载软件_js生成二维码并保存

<h1>
文字生成二维码及生成可下载的图片
</h1>
<div><input id="input" value="http://www.baidu.com" type="text"><button type="button" onclick="refresh()">生出来</button></div>
<div id="output">
<!--这里放canvas格式的二维码-->
</div>
<p>上面的码是使用canvas标签, 下面的是img标签</p>
<div id="img-qr">
<!--放img格式的二维码-->
</div>
<p id="download">
<!--放下载链接-->
</p>

<script src="http://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

 window.onload = function () { 

refresh();
};
function refresh() { 

let text = document.getElementById("input").value;
creater(text);
}
/** * 生成二维码及下载链接的函数 * @param text 传入你要生成二维码的文字 */
function creater(text = '') { 

//http://www.baidu.com可以自定义任意你要的链接或者文字
jQuery('#output').empty().qrcode(text);
let drawing = document.getElementsByTagName('canvas')[0];
//确定浏览器支持<canvas>元素
if (drawing.getContext) { 

let context = drawing.getContext('2d');
console.log(context);
//取得图像的数据 URI
let imgURI = drawing.toDataURL("image/png");
//显示img格式图片开始(不要此步可以跳过)
let image = document.createElement("img");
image.src = imgURI;
$("#img-qr").empty().append(image);
//显示img格式图片结束(不要此步可以跳过)
//显示下载链接开始
let a = document.createElement("a");
a.href = imgURI;
//设置下载链接的文字提示
a.innerText = 'download qrcode';
//设置下载的文件名
a.download = 'test.png';
document.body.appendChild(a);
$("#download").empty().append(a);
//显示下载链接结束
}
}

function toUtf8(str) { 

var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) { 

c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) { 

out += str.charAt(i);
} else if (c > 0x07FF) { 

out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else { 

out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}