kopia lustrzana https://github.com/hughchen/qr_image
Formatting site
rodzic
44c5cb7926
commit
bca2d15e9f
|
@ -77,3 +77,6 @@ canvas {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
34
index.html
34
index.html
|
@ -13,16 +13,18 @@
|
|||
<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>
|
||||
|
||||
<div class="center">
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=hA4TKV2Lbx8"
|
||||
target="_blank"
|
||||
|
@ -35,8 +37,9 @@
|
|||
<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 />
|
||||
|
||||
<div class="center">
|
||||
<canvas id="imageCanvas"></canvas>
|
||||
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<label>URL*:</label>
|
||||
<input class="w3-input" id="text" type="text" />
|
||||
|
@ -141,6 +143,7 @@
|
|||
|
||||
<br />
|
||||
|
||||
<div class="center">
|
||||
<button
|
||||
class="w3-button w3-white w3-border w3-border-blue"
|
||||
style="margin: 0 auto"
|
||||
|
@ -148,13 +151,17 @@
|
|||
>
|
||||
Generate QR code
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
<br />
|
||||
|
||||
<div class="center">
|
||||
<canvas id="myCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
<br />
|
||||
|
||||
<div class="center">
|
||||
<button
|
||||
class="w3-button w3-white w3-border w3-border-blue"
|
||||
style="margin: 0 auto"
|
||||
|
@ -162,8 +169,9 @@
|
|||
>
|
||||
Download PNG
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<br /><br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<a id="link"></a>
|
||||
|
|
7
index.js
7
index.js
|
@ -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;
|
||||
};
|
||||
|
|
Ładowanie…
Reference in New Issue