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
240 lines (204 loc) • 6.11 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Download Demo - EasyQRCodeJS</title>
<script
src="../dist/easy.qrcode.min.js"
type="text/javascript"
charset="utf-8"
></script>
<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 {
}
.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;
}
.download {
margin-top: 20px;
}
#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
<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 class="imgblock">
<div class="title">Download - PNG</div>
<div class="qr" id="qrcode_png"></div>
<div class="download" id="qrcode_png_download">
<button onclick="downloadQRcode('png')">download</button>
</div>
</div>
<div class="imgblock">
<div class="title">Download - SVG</div>
<div class="qr" id="qrcode_svg"></div>
<div class="download" id="qrcode_svg_download">
<button onclick="downloadQRcode('svg')">download</button>
</div>
</div>
</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/javascript">
var configPng = {
text: "www.easyproject.cn/donation",
width: 240,
height: 240,
colorDark: "#000000",
colorLight: "#ffffff",
PI: "#BF3030",
PO: "#269926",
AI: "#009ACD",
AO: "#B03060",
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
title: "PNG image",
titleHeight: 46,
onRenderingEnd: function (options, dataURL) {
document.getElementById("qrcode_png_download").style.display = "block";
},
};
var configSvg = {
text: "www.easyproject.cn/donation",
width: 240,
height: 240,
colorDark: "#000000",
colorLight: "#ffffff",
PI: "#f55066",
PO: "#aa5b71",
AO: "#A67C00",
AI: "#A67C00",
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
title: "SVG image",
titleHeight: 46,
drawer: "svg",
onRenderingEnd: function (options, dataURL) {
// Display the download button
document.getElementById("qrcode_png_download").style.display = "block";
},
};
var qrcodePng = new QRCode(document.getElementById("qrcode_png"), configPng);
var qrcodeSvg = new QRCode(document.getElementById("qrcode_svg"), configSvg);
function downloadQRcode(type) {
fileName = "easyQRCode";
if (type == "png") {
qrcodePng.download(fileName);
} else {
qrcodeSvg.download(fileName);
}
}
</script>