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;
}
.center {
text-align: center;
}

88
index.html
Wyświetl plik

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