kopia lustrzana https://github.com/hughchen/qr_image
192 wiersze
3.8 KiB
HTML
192 wiersze
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="index.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://www.w3schools.com/w3css/4/w3.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
|
/>
|
|
<link rel="icon" href="./images/demo_squid.png" />
|
|
</head>
|
|
|
|
<title>QRImage</title>
|
|
<body>
|
|
<div style="width: 50%; margin: 0 auto">
|
|
<div class="center">
|
|
<h1>QRImage</h1>
|
|
</div>
|
|
|
|
<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"
|
|
><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>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<label>Image File (optional):</label>
|
|
<input type="file" id="imageLoader" name="imageLoader" />
|
|
<p>
|
|
Works better for square images (use an
|
|
<a href="https://www.online-image-editor.com/">editor</a> as
|
|
needed).
|
|
</p>
|
|
|
|
<div class="center">
|
|
<canvas id="imageCanvas"></canvas>
|
|
</div>
|
|
|
|
<label>URL*:</label>
|
|
<input class="w3-input" id="text" type="text" />
|
|
|
|
<br />
|
|
|
|
<!-- <p>Bit size: <span id="printSize"></span></p> -->
|
|
|
|
<div class="tooltip">
|
|
Bit size:
|
|
<span class="tooltiptext"
|
|
>Larger sizes hide more of the image, but are easier to
|
|
scan. I found that a size of 30 works well.</span
|
|
>
|
|
<span id="printSize"></span>
|
|
</div>
|
|
|
|
<br /><br />
|
|
|
|
<div class="slidecontainer">
|
|
<input
|
|
type="range"
|
|
min="10"
|
|
max="100"
|
|
value="30"
|
|
class="slider"
|
|
id="radiusSize"
|
|
/>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="tooltip">
|
|
Error Correction:
|
|
<span class="tooltiptext"
|
|
>Higher level of error correction makes bigger qr codes, but
|
|
also allows you to hide more of the QR code. The former is
|
|
more relevant to this app.</span
|
|
>
|
|
<span id="printCorrection"></span>
|
|
</div>
|
|
|
|
<br /><br />
|
|
|
|
<div class="slidecontainer">
|
|
<input
|
|
type="range"
|
|
min="1"
|
|
max="3"
|
|
value="3"
|
|
class="slider"
|
|
id="errorCorrection"
|
|
/>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="tooltip">
|
|
Border Size:
|
|
<span class="tooltiptext"
|
|
>Size of white border around QR code. Typically need some
|
|
border around the code, but depending on your use case you
|
|
can get rid of it.</span
|
|
>
|
|
<span id="printBorderSize"></span>
|
|
</div>
|
|
|
|
<br /><br />
|
|
|
|
<div class="slidecontainer">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="5"
|
|
value="0"
|
|
class="slider"
|
|
id="borderSize"
|
|
/>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<input
|
|
type="checkbox"
|
|
id="whitebackground"
|
|
name="whitebackground"
|
|
/>
|
|
<label for="whitebackground">White background</label><br />
|
|
|
|
<br />
|
|
|
|
<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 />
|
|
|
|
<div class="center">
|
|
<canvas id="myCanvas"></canvas>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div class="center">
|
|
<button
|
|
class="w3-button w3-white w3-border w3-border-blue"
|
|
style="margin: 0 auto"
|
|
onclick="download()"
|
|
>
|
|
Download PNG
|
|
</button>
|
|
</div>
|
|
|
|
<div class="center">
|
|
<p>
|
|
*Note that these QR codes may not work with every QR code
|
|
reader, so be sure to test them first. If you are having
|
|
trouble getting them to read, you may want to increase the
|
|
bit size.
|
|
</p>
|
|
</div>
|
|
|
|
<br />
|
|
</div>
|
|
|
|
<a id="link"></a>
|
|
<div id="qrcode" style="display: none"></div>
|
|
<script src="qrcode.js"></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|