kopia lustrzana https://github.com/hughchen/qr_image
Add functionality to modify white border length
rodzic
143a7369f9
commit
1c7abcae07
25
index.html
25
index.html
|
@ -81,6 +81,31 @@
|
|||
|
||||
<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 />
|
||||
|
||||
<button
|
||||
class="w3-button w3-white w3-border w3-border-blue"
|
||||
style="margin: 0 auto"
|
||||
|
|
30
index.js
30
index.js
|
@ -65,6 +65,17 @@ correctionSlider.oninput = function () {
|
|||
}
|
||||
};
|
||||
|
||||
var borderSlider = document.getElementById("borderSize");
|
||||
var borderOutput = document.getElementById("printBorderSize");
|
||||
borderOutput.innerHTML = borderSlider.value; // Display the default slider value
|
||||
var borderSize = Number(borderSlider.value);
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
borderSlider.oninput = function () {
|
||||
borderOutput.innerHTML = this.value;
|
||||
borderSize = Number(this.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* Check whether bit at current position should be full sized.
|
||||
*
|
||||
|
@ -75,11 +86,13 @@ correctionSlider.oninput = function () {
|
|||
*/
|
||||
function isSafeBit(i, j, QRLength) {
|
||||
// Currently hard coding position bits
|
||||
if (i < 8 && j < 8) {
|
||||
lowerLimit = (8 + borderSize)
|
||||
upperLimit = (QRLength - 8 + borderSize)
|
||||
if (i < lowerLimit && j < lowerLimit) {
|
||||
return false;
|
||||
} else if (i > QRLength - 8 && j < 8) {
|
||||
} else if (i > upperLimit && j < lowerLimit) {
|
||||
return false;
|
||||
} else if (i < 8 && j > QRLength - 8) {
|
||||
} else if (i < lowerLimit && j > upperLimit) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
@ -156,7 +169,7 @@ function makeCode() {
|
|||
|
||||
// QR code sizing
|
||||
bitLength = 10;
|
||||
canvasLength = bitLength * (QRLength + 2);
|
||||
canvasLength = bitLength * (QRLength + borderSize * 2);
|
||||
canvas.width = canvasLength;
|
||||
canvas.height = canvasLength;
|
||||
|
||||
|
@ -185,7 +198,14 @@ function makeCode() {
|
|||
} else {
|
||||
ctx.fillStyle = white;
|
||||
}
|
||||
drawShape(ctx, i + 1, j + 1, bitLength, radiusRatio, QRLength);
|
||||
drawShape(
|
||||
ctx,
|
||||
i + borderSize,
|
||||
j + borderSize,
|
||||
bitLength,
|
||||
radiusRatio,
|
||||
QRLength
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue