mirror
/
qr_image
kopia lustrzana https://github.com/hughchen/qr_image
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Formatting site

main
Hugh Chen 2022-01-28 22:43:47 -08:00
rodzic 44c5cb7926
commit bca2d15e9f
3 zmienionych plików z 55 dodań i 43 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
index.css
Wyświetl plik

@ -77,3 +77,6 @@ canvas {
visibility: visible; visibility: visible;
} }
.center {
text-align: center;
}

88
index.html
Wyświetl plik

@ -13,30 +13,33 @@
<link rel="icon" href="./demo.png" /> <link rel="icon" href="./demo.png" />
</head> </head>
<title>qr_image</title> <title>QRImage</title>
<body> <body>
<div style="width: 50%; margin: 0 auto"> <div style="width: 50%; margin: 0 auto">
<h1>QR codes with images</h1> <div class="center">
<h1>QRImage</h1>
</div>
<h2> <div class="center">
A website to generate valid QR codes with images in the <h3>QRImage is a web app to generate QR codes with images.</h3>
background. </div>
</h2>
<a <div class="center">
href="https://www.youtube.com/watch?v=hA4TKV2Lbx8" <a
target="_blank" href="https://www.youtube.com/watch?v=hA4TKV2Lbx8"
><i target="_blank"
class="fa fa-youtube-play" ><i
style="font-size: 36px; color: red" class="fa fa-youtube-play"
></i style="font-size: 36px; color: red"
></a> ></i
></a>
<a href="https://github.com/hughchen/qr_image" target="_blank" <a href="https://github.com/hughchen/qr_image" target="_blank"
><i class="fa fa-github" style="font-size: 36px"></i ><i class="fa fa-github" style="font-size: 36px"></i
></a> ></a>
</div>
<br /><br /> <br />
<label>Image File (optional):</label> <label>Image File (optional):</label>
<input type="file" id="imageLoader" name="imageLoader" /> <input type="file" id="imageLoader" name="imageLoader" />
@ -45,11 +48,10 @@
<a href="https://www.online-image-editor.com/">editor</a> as <a href="https://www.online-image-editor.com/">editor</a> as
needed). needed).
</p> </p>
<br />
<canvas id="imageCanvas"></canvas> <div class="center">
<canvas id="imageCanvas"></canvas>
<br /> </div>
<label>URL*:</label> <label>URL*:</label>
<input class="w3-input" id="text" type="text" /> <input class="w3-input" id="text" type="text" />
@ -141,29 +143,35 @@
<br /> <br />
<button <div class="center">
class="w3-button w3-white w3-border w3-border-blue" <button
style="margin: 0 auto" class="w3-button w3-white w3-border w3-border-blue"
onclick="makeCode()" style="margin: 0 auto"
> onclick="makeCode()"
Generate QR code >
</button> Generate QR code
</button>
</div>
<br /><br /> <br />
<canvas id="myCanvas"></canvas> <div class="center">
<canvas id="myCanvas"></canvas>
</div>
<br /><br /> <br />
<button <div class="center">
class="w3-button w3-white w3-border w3-border-blue" <button
style="margin: 0 auto" class="w3-button w3-white w3-border w3-border-blue"
onclick="download()" style="margin: 0 auto"
> onclick="download()"
Download PNG >
</button> Download PNG
</button>
</div>
<br /><br /> <br />
</div> </div>
<a id="link"></a> <a id="link"></a>

7
index.js
Wyświetl plik

@ -7,6 +7,9 @@ imageLoader.addEventListener("change", handleImage, false);
var uploadCanvas = document.getElementById("imageCanvas"); var uploadCanvas = document.getElementById("imageCanvas");
var uploadContext = uploadCanvas.getContext("2d"); var uploadContext = uploadCanvas.getContext("2d");
uploadCanvas.width = 200;
uploadCanvas.height = 200;
img = false; img = false;
function handleImage(e) { function handleImage(e) {
@ -14,9 +17,7 @@ function handleImage(e) {
reader.onload = function (event) { reader.onload = function (event) {
img = new Image(); img = new Image();
img.onload = function () { img.onload = function () {
uploadCanvas.width = img.width; uploadContext.drawImage(img, 0, 0, 200, 200);
uploadCanvas.height = img.height;
uploadContext.drawImage(img, 0, 0);
}; };
img.src = event.target.result; img.src = event.target.result;
}; };