大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
html 部分
<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>
js
我们先引入两个js文件
<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);
//显示下载链接结束
}
}
界面效果
如果想生成中文，并且出现了乱码，可以使用下面方法将input文字进行转换
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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/180755.html原文链接：https://javaforall.net
