easyqrcodejs
Version:
Cross-browser QRCode generator for pure javascript. Support Canvas, SVG and Table drawing methods. Support Dot style, Logo, Background image, Colorful, Title etc. settings. Support Angular, Vue.js, React, Next.js, Svelte framework. Support binary(hex) dat
220 lines (194 loc) • 5.75 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>AMD Demo - EasyQRCodeJS</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
text-align: left;
margin: 0;
line-height: 80px;
background-color: #007bff;
color: #fff;
padding-left: 20px;
font-size: 36px;
}
#header a {
color: #ffff00;
}
#header a:hover {
color: #ff9933;
}
#container {
width: 1030px;
margin: 10px auto;
}
.imgblock {
margin: 10px 0;
text-align: center;
float: left;
min-height: 420px;
border-bottom: 1px solid #b4b7b4;
}
.qr table {
margin: 0 auto;
}
.title {
font-size: 15px;
font-weight: bold;
color: #fff;
text-align: center;
width: 330px;
margin: 10px 5px;
height: 60px;
background-color: #0084c6;
line-height: 60px;
}
#footer {
margin-top: 20px;
border-top: 1px solid gainsboro;
line-height: 40px;
clear: both;
text-align: center;
}
#footer a {
color: #0084c6;
text-decoration: none;
}
</style>
</head>
<body>
<div id="header">
EasyQRCodeJS Demo - AMD
<div style="float: right; margin-right: 100px">
<a href="http://www.easyproject.cn/easyqrcodejs/tryit.html">Try It!</a>
</div>
</div>
<div id="container"></div>
<div id="footer">
<a href="www.easyproject.cn/donation">www.easyproject.cn/donation</a>
</div>
<a
href="https://github.com/ushelp/EasyQRCodeJS"
class="github-corner"
aria-label="View source on GitHub"
><svg
width="80"
height="80"
viewBox="0 0 250 250"
style="
fill: #fd6c6c;
color: #fff;
position: absolute;
top: 0;
border: 0;
right: 0;
"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path></svg
></a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg);
}
}
@media (max-width: 500px) {
.github-corner:hover .octo-arm {
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out;
}
}
</style>
</body>
</html>
<script type="text/template" id="qrcodeTpl">
<div class="imgblock">
<div class="title">{title}</div>
<div class="qr" id="qrcode_{i}"></div>
</div>
</script>
<script src="js/require.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
require.config({
// 指定模块id 和其对应文件的相对路径
paths: {
QRCode: "../dist/easy.qrcode.min",
},
});
require(["QRCode"], function (QRCode) {
var demoParams = [
{
title: "Normal - Canvas",
config: {
text: "www.easyproject.cn/donation",
width: 240,
height: 240,
quietZone: 0,
colorDark: "#000000",
colorLight: "#ffffff",
//PI: '#f55066',
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
},
},
{
title: "Normal - SVG",
config: {
text: "www.easyproject.cn/donation",
drawer: "svg",
width: 240,
height: 240,
quietZone: 0,
colorDark: "#000000",
colorLight: "#ffffff",
//PI: '#f55066',
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
},
},
];
var qrcodeTpl = document.getElementById("qrcodeTpl").innerHTML;
var container = document.getElementById("container");
for (var i = 0; i < demoParams.length; i++) {
var qrcodeHTML = qrcodeTpl
.replace(/\{title\}/, demoParams[i].title)
.replace(/{i}/, i);
container.innerHTML += qrcodeHTML;
}
for (var i = 0; i < demoParams.length; i++) {
var t = new QRCode(
document.getElementById("qrcode_" + i),
demoParams[i].config
);
}
});
</script>