Skip to content

Commit 0aa2369

Browse files
ushelpushelp
committed
Add download qrcode image function
+ download(filename)
1 parent a57b307 commit 0aa2369

File tree

8 files changed

+363
-20
lines changed

8 files changed

+363
-20
lines changed

‎demo/demo.html‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>EasyQRCodeJS Demo</title>
6+
<title>Demo - EasyQRCodeJS</title>
77
<script src="../dist/easy.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
88

99
<style type="text/css">
@@ -52,6 +52,10 @@
5252
background-color: #0084C6;
5353
line-height: 60px;
5454
}
55+
.download{
56+
margin-top:20px;
57+
display: none;
58+
}
5559

5660
#footer {
5761
margin-top: 20px;
@@ -99,6 +103,9 @@
99103
<div class="imgblock">
100104
<div class="title">{title}</div>
101105
<div class="qr" id="qrcode_{i}"></div>
106+
<div class="download" id="qrcode_{i}_download">
107+
<button onclick="downloadQRcode('qrcode_{i}')">download</button>
108+
</div>
102109
</div>
103110
</script>
104111
<script type="text/javascript">
@@ -410,7 +417,7 @@
410417

411418
// === Logo
412419
logo: "https://avatars1.githubusercontent.com/u/4082017?s=160&v=4", // LOGO
413-
// logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",
420+
crossOrigin:"anonymous",
414421
// logoWidth:80,
415422
// logoHeight:80,
416423
logoBackgroundColor: '#FFF8DC', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
@@ -468,7 +475,11 @@
468475
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
469476

470477

471-
dotScale: 0.4
478+
dotScale: 0.4,
479+
onRenderingEnd:function(options, dataURL){
480+
// console.info(dataURL);
481+
console.log(options);
482+
}
472483
}
473484

474485
},
@@ -487,22 +498,22 @@
487498
colorLight: "#FFFACD", // Light color
488499

489500
// quietZone
490-
quietZone:0,
501+
quietZone:5,
491502

492503
// === Title
493504
title: 'Title', // Title
494505
titleFont: "normal normal bold 18px Arial", // Title font
495506
titleColor: "#004284", // Title Color
496507
titleBackgroundColor: "#fff", // Title Background
497-
titleHeight: 70, // Title height, include subTitle
508+
titleHeight:50, // Title height, include subTitle
498509
titleTop: 25, // Title draw position(Y coordinate), default is 30
499510

500511

501512
// === SubTitle
502513
subTitle: 'subTitle', // Subtitle content
503514
subTitleFont: "normal normal normal 14px Arial", // Subtitle font
504515
subTitleColor: "#004284", // Subtitle color
505-
subTitleTop: 40, // Subtitle drwa position(Y coordinate), default is 50
516+
subTitleTop: 45, // Subtitle drwa position(Y coordinate), default is 50
506517

507518

508519
// === Logo
@@ -540,7 +551,6 @@
540551
onRenderingEnd:function(options, dataURL){
541552
console.info(dataURL);
542553
},
543-
544554
drawer: 'svg'
545555
}
546556

@@ -554,10 +564,23 @@
554564
var container = document.getElementById('container');
555565

556566
for (var i = 0; i < demoParams.length; i++) {
557-
var qrcodeHTML = qrcodeTpl.replace(/\{title\}/, demoParams[i].title).replace(/{i}/, i);
567+
var qrcodeHTML = qrcodeTpl.replace(/\{title\}/, demoParams[i].title).replace(/{i}/g, i);
558568
container.innerHTML+=qrcodeHTML;
559569
}
570+
571+
var allQRcodes={};
560572
for (var i = 0; i < demoParams.length; i++) {
561-
var t=new QRCode(document.getElementById("qrcode_"+i), demoParams[i].config);
573+
var qrcode = new QRCode(document.getElementById("qrcode_"+i), demoParams[i].config);
574+
allQRcodes["qrcode_"+i] = qrcode;
575+
var downloadDivs = document.getElementsByClassName("download");
576+
for(var j=0; j<downloadDivs.length; j++){
577+
downloadDivs[j].style.display='block'
578+
}
562579
}
580+
581+
function downloadQRcode(qrcodeId){
582+
var qrcode = allQRcodes[qrcodeId];
583+
qrcode.download(qrcodeId);
584+
585+
}
563586
</script>

‎demo/demo_AMD.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>EasyQRCodeJS Demo - AMD</title>
6+
<title>AMD Demo - EasyQRCodeJS</title>
77
<style type="text/css">
88
body {
99
margin: 0;

‎demo/demo_download.html‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Download Demo - EasyQRCodeJS</title>
7+
<script src="../dist/easy.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
8+
9+
<style type="text/css">
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
#header {
16+
text-align: left;
17+
margin: 0;
18+
line-height: 80px;
19+
background-color: #007bff;
20+
color: #fff;
21+
padding-left: 20px;
22+
font-size: 36px;
23+
}
24+
25+
#header a {
26+
color: #FFFF00;
27+
}
28+
29+
#header a:hover {
30+
color: #FF9933;
31+
}
32+
33+
#container {
34+
width: 1030px;
35+
margin: 10px auto;
36+
}
37+
38+
.imgblock {
39+
margin: 10px 0;
40+
text-align: center;
41+
float: left;
42+
min-height: 420px;
43+
border-bottom: 1px solid #B4B7B4;
44+
}
45+
46+
.qr table {}
47+
48+
.title {
49+
font-size: 15px;
50+
font-weight: bold;
51+
color: #fff;
52+
text-align: center;
53+
width: 330px;
54+
margin: 10px 5px;
55+
height: 60px;
56+
background-color: #0084C6;
57+
line-height: 60px;
58+
}
59+
60+
.download {
61+
margin-top: 20px;
62+
}
63+
64+
#footer {
65+
margin-top: 20px;
66+
border-top: 1px solid gainsboro;
67+
line-height: 40px;
68+
clear: both;
69+
text-align: center;
70+
}
71+
72+
#footer a {
73+
color: #0084C6;
74+
text-decoration: none;
75+
}
76+
</style>
77+
</head>
78+
79+
<body>
80+
<div id="header">
81+
82+
EasyQRCodeJS Demo
83+
84+
85+
<div style="float: right;margin-right: 100px;">
86+
<a href="http://www.easyproject.cn/easyqrcodejs/tryit.html">Try It!</a>
87+
</div>
88+
</div>
89+
90+
<div id="container">
91+
<div class="imgblock">
92+
<div class="title">Download - PNG</div>
93+
<div class="qr" id="qrcode_png"></div>
94+
<div class="download" id="qrcode_png_download">
95+
<button onclick="downloadQRcode('png')">download</button>
96+
</div>
97+
</div>
98+
<div class="imgblock">
99+
<div class="title">Download - SVG</div>
100+
<div class="qr" id="qrcode_svg"></div>
101+
<div class="download" id="qrcode_svg_download">
102+
<button onclick="downloadQRcode('svg')">download</button>
103+
</div>
104+
</div>
105+
</div>
106+
107+
108+
<div id="footer">
109+
110+
<a href="www.easyproject.cn/donation">www.easyproject.cn/donation</a>
111+
112+
</div>
113+
114+
115+
<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"
116+
style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
117+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
118+
<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"
119+
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
120+
<path
121+
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"
122+
fill="currentColor" class="octo-body"></path>
123+
</svg></a>
124+
<style>
125+
.github-corner:hover .octo-arm {
126+
animation: octocat-wave 560ms ease-in-out
127+
}
128+
129+
@keyframes octocat-wave {
130+
131+
0%,
132+
100% {
133+
transform: rotate(0)
134+
}
135+
136+
20%,
137+
60% {
138+
transform: rotate(-25deg)
139+
}
140+
141+
40%,
142+
80% {
143+
transform: rotate(10deg)
144+
}
145+
}
146+
147+
@media (max-width:500px) {
148+
.github-corner:hover .octo-arm {
149+
animation: none
150+
}
151+
152+
.github-corner .octo-arm {
153+
animation: octocat-wave 560ms ease-in-out
154+
}
155+
}
156+
</style>
157+
</body>
158+
159+
</html>
160+
161+
<script type="text/javascript">
162+
var configPng = {
163+
text: "www.easyproject.cn/donation",
164+
165+
width: 240,
166+
height: 240,
167+
colorDark: "#000000",
168+
colorLight: "#ffffff",
169+
170+
PI: '#BF3030',
171+
PO: '#269926',
172+
AI: '#009ACD',
173+
AO: '#B03060',
174+
175+
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
176+
177+
title: 'PNG image',
178+
titleHeight: 46,
179+
180+
onRenderingEnd:function(options, dataURL){
181+
document.getElementById("qrcode_png_download").style.display='block';
182+
}
183+
}
184+
185+
var configSvg = {
186+
text: "www.easyproject.cn/donation",
187+
188+
width: 240,
189+
height: 240,
190+
colorDark: "#000000",
191+
colorLight: "#ffffff",
192+
193+
PI: '#f55066',
194+
PO: '#aa5b71',
195+
AO: '#A67C00',
196+
AI: '#A67C00',
197+
198+
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
199+
200+
title: 'SVG image',
201+
titleHeight: 46,
202+
203+
drawer: 'svg',
204+
onRenderingEnd:function(options, dataURL){
205+
// Display the download button
206+
document.getElementById("qrcode_png_download").style.display='block';
207+
}
208+
}
209+
210+
var qrcodePng = new QRCode(document.getElementById("qrcode_png"), configPng);
211+
var qrcodeSvg = new QRCode(document.getElementById("qrcode_svg"), configSvg);
212+
213+
function downloadQRcode(type){
214+
fileName='easyQRCode'
215+
if(type=='png'){
216+
qrcodePng.download(fileName);
217+
}else{
218+
qrcodeSvg.download(fileName);
219+
}
220+
}
221+
</script>

‎dist/easy.qrcode.min.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ declare class QRCode {
1212
makeCode(text: string): void;
1313

1414
resize(width: number, height: number): void;
15+
16+
download(filename: string): void;
1517

1618
static CorrectLevel: {
1719
H: number;

‎dist/easy.qrcode.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "easyqrcodejs",
3-
"version": "4.4.13",
3+
"version": "4.5.0",
44
"description": "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) data mode.(Running with DOM on client side)",
55
"main": "dist/easy.qrcode.min.js",
66
"scripts": {},

0 commit comments

Comments
 (0)