@liquid-js/qr-code-styling 4.0.0-2 → 4.0.0-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -50,7 +50,7 @@ CornerDotType.classy = "classy", CornerDotType.outpoint = "outpoint", CornerDotT
|
|
|
50
50
|
CornerSquareType.extraRounded = "extra-rounded", CornerSquareType.classy = "classy",
|
|
51
51
|
CornerSquareType.outpoint = "outpoint", CornerSquareType.inpoint = "inpoint", (ShapeType = ShapeType || (ShapeType = {})).square = "square",
|
|
52
52
|
ShapeType.circle = "circle", (ImageMode = ImageMode || (ImageMode = {})).center = "center",
|
|
53
|
-
ImageMode.background = "background";
|
|
53
|
+
ImageMode.overlay = "overlay", ImageMode.background = "background";
|
|
54
54
|
|
|
55
55
|
let defaultOptions = {
|
|
56
56
|
document: void 0,
|
|
@@ -89,8 +89,7 @@ function sanitizeOptions(newOptions_options) {
|
|
|
89
89
|
fill: {
|
|
90
90
|
...newOptions_options.imageOptions.fill
|
|
91
91
|
}
|
|
92
|
-
}, newOptions_options.imageOptions.
|
|
93
|
-
newOptions_options.imageOptions.fill.gradient && (newOptions_options.imageOptions.fill.gradient = sanitizeGradient(newOptions_options.imageOptions.fill.gradient)),
|
|
92
|
+
}, newOptions_options.imageOptions.fill.gradient && (newOptions_options.imageOptions.fill.gradient = sanitizeGradient(newOptions_options.imageOptions.fill.gradient)),
|
|
94
93
|
newOptions_options.dotsOptions = {
|
|
95
94
|
...newOptions_options.dotsOptions
|
|
96
95
|
}, newOptions_options.dotsOptions.gradient && (newOptions_options.dotsOptions.gradient = sanitizeGradient(newOptions_options.dotsOptions.gradient)),
|
|
@@ -828,18 +827,19 @@ class QRSVG {
|
|
|
828
827
|
qr_size = await this.imageTools.getSize(this.options.image, this.options.imageOptions.crossOrigin);
|
|
829
828
|
let {imageOptions, errorCorrectionPercent} = this.options;
|
|
830
829
|
if (imageOptions.mode == ImageMode.background) {
|
|
831
|
-
|
|
832
|
-
|
|
830
|
+
var coverLevel_margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0;
|
|
831
|
+
alignment_maxWidth_typeNumber = (this.options.width - 2 * coverLevel_margin * dotSize) * imageOptions.imageSize,
|
|
832
|
+
coverLevel_margin = (this.options.height - 2 * coverLevel_margin * dotSize) * imageOptions.imageSize;
|
|
833
833
|
let {width, height} = qr_size;
|
|
834
834
|
height = height / width * alignment_maxWidth_typeNumber, width = alignment_maxWidth_typeNumber,
|
|
835
|
-
height >
|
|
836
|
-
|
|
835
|
+
height > coverLevel_margin && (width = width / height * coverLevel_margin, height = coverLevel_margin),
|
|
836
|
+
drawImageSize = {
|
|
837
837
|
hideXDots: 0,
|
|
838
838
|
hideYDots: 0,
|
|
839
839
|
width,
|
|
840
840
|
height
|
|
841
841
|
};
|
|
842
|
-
} else
|
|
842
|
+
} else coverLevel_margin = imageOptions.imageSize * errorCorrectionPercent, alignment_maxWidth_typeNumber = QRUtil.getPatternPosition(alignment_maxWidth_typeNumber),
|
|
843
843
|
drawImageSize = function({originalHeight, originalWidth, maxHiddenDots: JSCompiler_object_inline_x_16_hideMax_maxHiddenDots, maxHiddenAxisDots: JSCompiler_object_inline_y_17_maxHiddenAxisDots_maxW_upper, dotSize, margin}) {
|
|
844
844
|
if (0 >= originalHeight || 0 >= originalWidth || 0 >= JSCompiler_object_inline_x_16_hideMax_maxHiddenDots || 0 >= dotSize || 4 * margin ** 2 > JSCompiler_object_inline_x_16_hideMax_maxHiddenDots) return {
|
|
845
845
|
height: 0,
|
|
@@ -872,19 +872,24 @@ class QRSVG {
|
|
|
872
872
|
}({
|
|
873
873
|
originalWidth: qr_size.width,
|
|
874
874
|
originalHeight: qr_size.height,
|
|
875
|
-
maxHiddenDots: Math.floor(
|
|
875
|
+
maxHiddenDots: Math.floor(coverLevel_margin * (count * count - 192 - 2 * (count - 16) - 25 * alignment_maxWidth_typeNumber.length ** 2)),
|
|
876
876
|
maxHiddenAxisDots: count - 14,
|
|
877
877
|
dotSize,
|
|
878
878
|
margin: imageOptions.margin
|
|
879
879
|
});
|
|
880
880
|
}
|
|
881
|
-
this.drawBackground(), this.options.image && 0 < drawImageSize.width && 0 < drawImageSize.height && await this.drawImage({
|
|
881
|
+
this.drawBackground(), this.options.imageOptions.mode != ImageMode.overlay && this.options.image && 0 < drawImageSize.width && 0 < drawImageSize.height && await this.drawImage({
|
|
882
882
|
width: drawImageSize.width,
|
|
883
883
|
height: drawImageSize.height,
|
|
884
884
|
count,
|
|
885
885
|
dotSize
|
|
886
886
|
}), this.drawDots(((i, j) => !(this.options.imageOptions.mode == ImageMode.center && i >= (count - drawImageSize.hideXDots) / 2 && i < (count + drawImageSize.hideXDots) / 2 && j >= (count - drawImageSize.hideYDots) / 2 && j < (count + drawImageSize.hideYDots) / 2 || 8 > i && 8 > j || i >= count - 8 && 8 > j || j >= count - 8 && 8 > i))),
|
|
887
|
-
this.
|
|
887
|
+
this.options.imageOptions.mode == ImageMode.overlay && this.options.image && 0 < drawImageSize.width && 0 < drawImageSize.height && await this.drawImage({
|
|
888
|
+
width: drawImageSize.width,
|
|
889
|
+
height: drawImageSize.height,
|
|
890
|
+
count,
|
|
891
|
+
dotSize
|
|
892
|
+
}), this.drawCorners();
|
|
888
893
|
}
|
|
889
894
|
drawBackground() {
|
|
890
895
|
let options = this.options;
|
|
@@ -912,8 +917,9 @@ class QRSVG {
|
|
|
912
917
|
let options = this.options;
|
|
913
918
|
var count = this.qr.getModuleCount();
|
|
914
919
|
if (count > options.width || count > options.height) throw "The canvas is too small.";
|
|
915
|
-
var minSize_xFakeBeginning = Math.min(options.width, options.height);
|
|
916
920
|
let dotSize = this.options.dotsOptions.size;
|
|
921
|
+
var minSize_xFakeBeginning = Math.min(options.width, options.height);
|
|
922
|
+
options.imageOptions.mode == ImageMode.background && (minSize_xFakeBeginning -= 2 * dotSize * (options.imageOptions.margin || 0));
|
|
917
923
|
var colorCount_xBeginning = Math.floor((options.width - count * dotSize) / 2), yBeginning_yFakeBeginning = Math.floor((options.height - count * dotSize) / 2);
|
|
918
924
|
let dot = new QRDot(options.dotsOptions.type, this.document), overlayDot = new QRDot(DotType.tinySquare, this.document), markerDot = new QRDot(DotType.square, this.document);
|
|
919
925
|
[this.dotsMask, this.dotsMaskGroup] = this.createMask("mask-dot-color"), this.defs.appendChild(this.dotsMask),
|
|
@@ -921,8 +927,9 @@ class QRSVG {
|
|
|
921
927
|
this.defs.appendChild(this.lightDotsMask));
|
|
922
928
|
var fakeCount_margin = 0;
|
|
923
929
|
let additionalDots = 0;
|
|
924
|
-
fakeCount_margin = count, options.shape === ShapeType.circle
|
|
930
|
+
fakeCount_margin = count, options.shape === ShapeType.circle ? (fakeCount_margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0,
|
|
925
931
|
additionalDots = Math.floor((minSize_xFakeBeginning / dotSize - count - 2 * fakeCount_margin) / 2),
|
|
932
|
+
fakeCount_margin = count + 2 * additionalDots) : options.imageOptions.mode == ImageMode.background && (additionalDots = 1,
|
|
926
933
|
fakeCount_margin = count + 2 * additionalDots), minSize_xFakeBeginning = colorCount_xBeginning - additionalDots * dotSize,
|
|
927
934
|
yBeginning_yFakeBeginning -= additionalDots * dotSize, colorCount_xBeginning = count + 2 * additionalDots;
|
|
928
935
|
let fakeMatrix = Array(fakeCount_margin);
|
|
@@ -932,7 +939,7 @@ class QRSVG {
|
|
|
932
939
|
for (let j = 0; j < fakeCount_margin; j++) if (i > additionalDots - 1 && i < fakeCount_margin - additionalDots && j > additionalDots - 1 && j < fakeCount_margin - additionalDots) {
|
|
933
940
|
let ii = i - additionalDots, jj = j - additionalDots;
|
|
934
941
|
alignment && !alignment(ii, jj) ? fakeMatrix[i][j] = void 0 : fakeMatrix[i][j] = !!this.qr.isDark(jj, ii);
|
|
935
|
-
} else options.shape === ShapeType.circle && Math.sqrt((i - center_jAlign) * (i - center_jAlign) + (j - center_jAlign) * (j - center_jAlign)) > center_jAlign ?
|
|
942
|
+
} else fakeMatrix[i][j] = options.shape === ShapeType.circle && Math.sqrt((i - center_jAlign) * (i - center_jAlign) + (j - center_jAlign) * (j - center_jAlign)) > center_jAlign ? void 0 : i == additionalDots - 1 || i == fakeCount_margin - additionalDots || j == additionalDots - 1 || j == fakeCount_margin - additionalDots ? (j == additionalDots - 1 && (i < additionalDots + 8 || i > fakeCount_margin - additionalDots - 9) || j == fakeCount_margin - additionalDots && i < additionalDots + 8 || i == additionalDots - 1 && (j < additionalDots + 8 || j > fakeCount_margin - additionalDots - 9) || i == fakeCount_margin - additionalDots && j < additionalDots + 8) && void 0 : this.qr.isDark(0 > j - 2 * additionalDots ? j : j >= count ? j - 2 * additionalDots : j - additionalDots, 0 > i - 2 * additionalDots ? i : i >= count ? i - 2 * additionalDots : i - additionalDots);
|
|
936
943
|
}
|
|
937
944
|
alignment = QRUtil.getPatternPosition((count - 17) / 4);
|
|
938
945
|
for (let i = 0; i < fakeCount_margin; i++) {
|
|
@@ -955,10 +962,10 @@ class QRSVG {
|
|
|
955
962
|
options: options.imageOptions.fill.gradient,
|
|
956
963
|
color: options.imageOptions.fill.color,
|
|
957
964
|
additionalRotation: 0,
|
|
958
|
-
x: minSize_xFakeBeginning
|
|
959
|
-
y: yBeginning_yFakeBeginning
|
|
960
|
-
height:
|
|
961
|
-
width:
|
|
965
|
+
x: minSize_xFakeBeginning,
|
|
966
|
+
y: yBeginning_yFakeBeginning,
|
|
967
|
+
height: colorCount_xBeginning * dotSize,
|
|
968
|
+
width: colorCount_xBeginning * dotSize,
|
|
962
969
|
name: "light-dot-color"
|
|
963
970
|
}), this.createColor({
|
|
964
971
|
options: options.dotsOptions?.gradient,
|
|
@@ -1045,15 +1052,14 @@ class QRSVG {
|
|
|
1045
1052
|
}));
|
|
1046
1053
|
}
|
|
1047
1054
|
async drawImage({width: dw_width, height: dh_height, count, dotSize}) {
|
|
1048
|
-
var image = this.options, container_data = image.imageOptions.margin * dotSize;
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1055
|
+
var image = this.options, dx = Math.floor((image.width - count * dotSize) / 2), encoding = Math.floor((image.height - count * dotSize) / 2), container_data = image.imageOptions.margin * dotSize;
|
|
1056
|
+
if (image.imageOptions.mode == ImageMode.background && (container_data = 0), dx = dx + container_data + (count * dotSize - dw_width) / 2,
|
|
1057
|
+
count = encoding + container_data + (count * dotSize - dh_height) / 2, dw_width -= 2 * container_data,
|
|
1058
|
+
dh_height -= 2 * container_data, container_data = await this.imageTools.toDataURL(image.image || ""),
|
|
1052
1059
|
(image = this.document.createElementNS("http://www.w3.org/2000/svg", "image")).setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", container_data || ""),
|
|
1053
1060
|
container_data.startsWith("data:image/svg+xml;")) {
|
|
1054
|
-
dotSize = (container_data = container_data.substring(19)).indexOf(",")
|
|
1055
|
-
|
|
1056
|
-
if (container_data = container_data.substring(dotSize + 1), "base64" === encoding) container_data = "function" == typeof atob ? atob(container_data) : Buffer.from(container_data, "base64").toString("utf8"); else container_data = "";
|
|
1061
|
+
if (dotSize = (container_data = container_data.substring(19)).indexOf(","), encoding = container_data.substring(0, dotSize),
|
|
1062
|
+
container_data = container_data.substring(dotSize + 1), "base64" === encoding) container_data = "function" == typeof atob ? atob(container_data) : Buffer.from(container_data, "base64").toString("utf8"); else container_data = "";
|
|
1057
1063
|
container_data && (container_data = (new DOMParser).parseFromString(container_data, "text/xml"),
|
|
1058
1064
|
(container_data = Array.from(container_data.getElementsByTagName("svg"))).length && (image = container_data[0]));
|
|
1059
1065
|
}
|
|
@@ -1154,13 +1160,15 @@ let QRCodeStyling$1 = class {
|
|
|
1154
1160
|
}
|
|
1155
1161
|
setupSvg() {
|
|
1156
1162
|
if (this.qr) {
|
|
1157
|
-
var
|
|
1158
|
-
this.options.imageOptions.mode == ImageMode.background && (
|
|
1159
|
-
|
|
1160
|
-
this.
|
|
1163
|
+
var count = this.qr.getModuleCount();
|
|
1164
|
+
this.options.imageOptions.mode == ImageMode.background && this.options.shape != ShapeType.circle && (count += 2),
|
|
1165
|
+
0 == (count = Math.ceil((this.options.shape == ShapeType.circle ? Math.sqrt(2) : 1) * count)) % 2 && --count;
|
|
1166
|
+
var margin = this.options.backgroundOptions && this.options.backgroundOptions.margin || 0;
|
|
1167
|
+
this.options.imageOptions.mode == ImageMode.background && (margin += this.options.imageOptions.margin || 0),
|
|
1168
|
+
count = Math.ceil(this.options.dotsOptions.size * (count + 2 * margin)), this.qrSVG = new QRSVG({
|
|
1161
1169
|
...this.options,
|
|
1162
|
-
width:
|
|
1163
|
-
height:
|
|
1170
|
+
width: count,
|
|
1171
|
+
height: count,
|
|
1164
1172
|
errorCorrectionPercent: ErrorCorrectionPercents[this.options.qrOptions.errorCorrectionLevel]
|
|
1165
1173
|
}), this.svgDrawingPromise = this.qrSVG.drawQR(this.qr).then((() => {
|
|
1166
1174
|
this.qrSVG?.element && this.extension?.(this.qrSVG.element, this.options);
|