<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>二维码制作 - 在线工具 - OKTools</title>
<meta name="keywords" content="二维码,二维码制作,二维码生成,二维码图片">
<meta name="description" content="在线二维码制作工具,二维码制作,二维码生成,二维码图片">
<link rel="shortcut icon" href="../static/favicon.ico">
<link rel="stylesheet" href="../static/css/style.css" type="text/css">
<style>
.select {
flex-shrink: 1;
width: 100%;
}
.options {
width: 200px;
margin: 0 24px;
}
#input_size {
max-width: 111px;
}
.image {
width: 280px;
height: 280px;
background-color: #f3f3f3;
clear: both;
display: block;
margin: auto;
}
</style>
</head>
<body>
<main>
<div class="container">
<h1>二维码制作</h1>
<div class="flex mt-2" style="justify-content: flex-end;">
<div style="flex-grow: 1">
<div class="control">
<textarea id="area_text" class="textarea fixed-size" rows="10" maxlength="200"
onfocusin="onInputText(this)" placeholder="二维码内容"
onpaste="setTimeout(generate, 1)"></textarea>
<p id="text_help" class="help text-info">字数越多，越不易扫描</p>
</div>
</div>
<div class="options">
<div class="group fullwidth">
<span class="static">尺寸(px)</span>
<input id="input_size" class="input" type="number" value="280"
oninput="if(value>1000)value=1000">
</div>
<div class="group fullwidth mt-2">
<span class="static">纠错等级</span>
<select id="select_level" class="select">
<option value="2">H : 高</option>
<option value="3" selected>Q : 中等</option>
<option value="0">M : 低</option>
<option value="1">L : 最低</option>
</select>
</div>
<div class="group fullwidth mt-2">
<span class="static">背景颜色</span>
<input id="input_bg" class="input" type="color" value="#ffffff">
</div>
<div class="group fullwidth mt-2">
<span class="static">前景颜色</span>
<input id="input_fg" class="input" type="color" value="#000000">
</div>
<button class="button primary fullwidth mt-2" onclick="generate()">生成二维码</button>
</div>
<div>
<figure id="img_qrcode" class="image"></figure>
<button class="button fullwidth mt-2" onclick="save()">保存图片</button>
</div>
</div>
<div class="content mt-2">
<h2>二维码原理</h2>
<p>二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。
堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成；
矩阵式二维条码以矩阵的形式组成，在矩阵相应元素位置上用“点”表示二进制“1”，
用“空”表示二进制“0”，“点”和“空”的排列组成代码。</p>
<h2>数据表示方法</h2>
<p>深色模块表示二进制“1”，浅色模块表示二进制“0”。</p>
<h2>纠错能力</h2>
<ul>
<li>level L : 约可纠错7%的数据码字</li>
<li>level M : 约可纠错15%的数据码字</li>
<li>level Q : 约可纠错25%的数据码字</li>
<li>level H : 约可纠错30%的数据码字</li>
</ul>
</div>
</div>
</main>
<script src="../static/js/qrcode.min.js"></script>
<script>
let img_qrcode = document.getElementById('img_qrcode');
function generate() {
img_qrcode.innerHTML = '';
img_qrcode.style.visibility = 'hidden';
let area_text = document.getElementById('area_text');
if (!area_text.value) {
area_text.classList.add('error');
return
}
let size = parseInt(document.getElementById('input_size').value);
if (size <= 0 || size > 1000) {
return;
}
try {
new QRCode(img_qrcode, {
text: area_text.value,
width: size,
height: size,
colorDark: document.getElementById('input_fg').value,
colorLight: document.getElementById('input_bg').value,
correctLevel: parseInt(document.getElementById('select_level').value)
});
setTimeout(() => img_qrcode.style.visibility = 'visible');
} catch (e) {
document.getElementById('area_text').classList.add('error');
let text_help = document.getElementById('text_help');
text_help.classList.add('text-error');
text_help.innerText = '内容过多'
}
}
function onInputText(e) {
e.classList.remove('error');
let text_help = document.getElementById('text_help');
text_help.classList.remove('text-error');
text_help.innerText = '字数越多，越不易扫描';
}
function save() {
let img = img_qrcode.getElementsByTagName('img')[0];
let url = img.src;
let a = document.createElement('a');
let event = new MouseEvent('click');
a.download = 'qrcode_' + Math.round(new Date() / 1000);
a.href = url;
a.dispatchEvent(event)
}
</script>
</body>
</html>
oktools离线版.7z （79个子文件） 
oktools templates 
rsa.html 3KB number.html 3KB json.html 2KB regex.html 2KB qrcode.html 6KB image2base64.html 4KB json2yaml.html 4KB hash.html 3KB morse.html 1KB pdf2img.html 5KB timestamp.html 4KB tinyimg.html 3KB color.html 3KB base64.html 2KB aside.html 2KB json2go.html 2KB placeholder.html 3KB index.html 5KB des.html 3KB file_hash.html 2KB url.html 3KB aes.html 3KB websocket.html 2KB unicode.html 3KB json2xml.html 5KB index.html 5KB static js 
tinyimg.js 4KB js-yaml 3.13.1 js-yaml.min.js 42KB encrypt_des.js 3KB color_convert.js 15KB highlight.js 9.15.9 languages xml.min.js 980B go.min.js 728B json.min.js 308B yaml.min.js 657B highlight.min.js 48KB jsencrypt 3.0.0-rc.1 jsencrypt.min.js 54KB file_hash.worker.js 1KB jsoneditor 6.1.0 jsoneditor-minimalist.js 604KB jsoneditor.map 867KB jsoneditor.min.js 787KB img 
jsoneditor-icons.svg 31KB which files do I need.md 1KB jsoneditor.js 1.56MB jsoneditor.css 40KB jsoneditor-minimalist.map 286KB jsoneditor-minimalist.min.js 288KB jsoneditor.min.css 33KB morse.js 3KB qrcode.min.js 19KB clipboard.js 2.0.4 clipboard.min.js 11KB file_hash.js 7KB crypto-js 3.1.9-1 crypto-js.min.js 47KB fast-xml-parser 3.12.16 parser.min.js 15KB placeholder.js 2KB pdf.js 2.2.228 pdf.min.js 327KB pdf.worker.min.js 756KB websocket.js 2KB encrypt_aes.js 3KB encrypt_rsa.js 2KB regex.js 4KB json2go.js 11KB timestamp.js 2KB css style.css 10KB font-awesome 5.10.0-11 webfonts fa-solid-900.woff 96KB fa-solid-900.ttf 187KB fa-solid-900.woff2 74KB css fontawesome.min.css 54KB all.min.css 55KB highlight.js 9.15.9 styles idea.min.css 890B jsoneditor 6.1.0 jsoneditor-minimalist.js 604KB jsoneditor.map 867KB jsoneditor.min.js 787KB img jsoneditor-icons.svg 31KB jsoneditor.js 1.56MB jsoneditor.css 40KB jsoneditor-minimalist.map 286KB jsoneditor-minimalist.min.js 288KB jsoneditor.min.css 33KB favicon.ico 617B资源评论
mkchiny
- 粉丝: 13
- 资源: 13
最新资源
- 【创新无忧】基于开普勒优化算法KOA优化相关向量机RVM实现数据多输入单输出回归预测附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化广义神经网络GRNN实现电机故障诊断附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化广义神经网络GRNN实现光伏预测附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化极限学习机KELM实现故障诊断附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化广义神经网络GRNN实现数据回归预测附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化极限学习机ELM实现乳腺肿瘤诊断附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化广义神经网络GRNN实现电机故障诊断附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化相关向量机RVM实现数据多输入单输出回归预测附matlab代码.rar
- 【创新无忧】基于粒子群优化算法PSO优化相关向量机RVM实现北半球光伏数据预测附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化广义神经网络GRNN实现数据回归预测附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化广义神经网络GRNN实现光伏预测附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化极限学习机ELM实现乳腺肿瘤诊断附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化相关向量机RVM实现数据多输入单输出回归预测附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化极限学习机KELM实现故障诊断附matlab代码.rar
- 【创新无忧】基于凌日优化算法TSOA优化相关向量机RVM实现北半球光伏数据预测附matlab代码.rar
- 【创新无忧】基于龙格库塔优化算法RUN优化广义神经网络GRNN实现电机故障诊断附matlab代码.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
