基于jquery.qrcode.js制作二维码并提供下载
章盛
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基于jquery.qrcode.js制作二维码</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 100px;
}
body {
font-size: 16px;
}
.app {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7.5rem;
height: 5rem;
margin: 0 auto;
background-color: rgb(211, 240, 237);
}
.app > h1 {
text-align: center;
padding: 0.5rem 0 0.3rem 0;
font-family: Courier, "arial block", "微软雅黑";
}
.box {
display: flex;
align-items: center;
justify-content: space-around;
}
.box .options,
.box #output {
width: 100%;
/* border: 1px solid black; */
padding: 0.2rem 0.8rem 0.4rem 0.8rem;
}
.box #output {
text-align: center;
}
.box .options #img_params div,
.box .options #img_params h3 {
padding: 0.05rem;
}
.box .options #img_params div input {
height: 0.3rem;
width: 2.1rem;
outline: none;
border: none;
border: 1px solid rgb(155, 154, 154);
border-radius: 3px;
padding-left: 0.1rem;
margin-top: 0.05rem;
}
.box .options #img_params div select {
height: 0.3rem;
width: 1.2rem;
outline: none;
border: none;
padding-left: 0.1rem;
border: 1px solid rgb(155, 154, 154);
border-radius: 3px;
margin-top: 0.05rem;
}
.box .options #img_params div button {
outline: none;
border: none;
color: #fff;
background-color: #583a78;
width: 1rem;
height: 0.35rem;
border-radius: 0.05rem;
}
.box .options #img_params div button:hover {
background-color: darkblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="app">
<h1>制作一张二维码图片，并可以提供下载</h1>
<div class="box">
<!-- 用户的选择操作 -->
<div class="options">
<div id="img_params">
<h3>请设置二维码</h3>
<div>
<lebal>网址名称:</lebal>
<br />
<input type="text" class="img_name" placeholder="输入网址" />
</div>
<div>
<lebal>下载名称:</lebal>
<br />
<input type="text" class="title" placeholder="输入名称" />
</div>
<div>
<lebal>下载类型:</lebal>
<br />
<select class="img_type">
<option value="png" selected>png</option>
<option value="jpg">jpg</option>
<option value="bmp">bmp</option>
</select>
</div>
<div>
<button class="create">点击生成</button>
<button class="download">点击下载</button>
</div>
</div>
</div>
<!-- 生成图片的容器 -->
<div id="output"></div>
</div>
</div>
<script src="https://list-of-jquery.oss-cn-hangzhou.aliyuncs.com/jquery-3.5.1.js"></script>
<script src="https://list-of-jquery.oss-cn-hangzhou.aliyuncs.com/jquery.qrcode.min.js"></script>
<script>
jQuery(function () {
//点击产生二维码
jQuery(".create").click(function () {
jQuery("#output").empty();
generatCode(jQuery(".img_name").val());
});
//点击二维码，进行下载
jQuery(".download").click(function () {
let url = output.children[0];
if (!url) {
return alert("请先生成二维码！");
}
let title = jQuery(".title").val();
let type = jQuery(".img_type").val();
if (type === "png") {
downLoad(saveAsPNG(url), title);
} else if (type === "jpg") {
downLoad(saveAsJPG(url), title);
} else {
downLoad(saveAsBMP(url), title);
}
});
});
/**
* 产生二维码
* @date 2021-03-03
* @returns {any}
*/
function generatCode(url) {
jQuery("#output").qrcode({
//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
render: "canvas",
//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
text: url,
//二维码的宽度
width: 200,
height: 200,
//二维码的后景色
background: "#ffffff",
//二维码的前景色
foreground: "#000000",
//可以修改的内部小图片，建议使用正方形图片，在使用的过程中修改图片资源即可
src: "bootcss.png",
//内部小图片的大小
imgWidth: 50,
imgHeight: 50,
});
}
/**
* 下载二维码图片
* @date 2021-03-03
* @param {any} url
* @param {any} title
* @returns {any}
*/
function downLoad(url, title) {
var oA = document.createElement("a");
// 设置下载的文件名，默认是'下载'
oA.download = title;
oA.href = url;
//拼接a标签
document.body.appendChild(oA);
//模拟点击
oA.click();
// 下载之后把创建的元素删除
oA.remove();
}
// 保存成png格式的图片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
// 保存成jpg格式的图片
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
}
// 保存成bmp格式的图片 目前浏览器支持性不好
function saveAsBMP(canvas) {
return canvas.toDataURL("image/bmp");
}
</script>
</body>
</html>
类似资料：