Skip to content

Commit 24d1a78

Browse files
ushelpushelp
committed
Add autoColorDark, autoColorLight options
 + Add `autoColorDark`, `autoColorLight` options # Optimize codes
1 parent b7ba22d commit 24d1a78

File tree

5 files changed

+70
-58
lines changed

5 files changed

+70
-58
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
node_modules
2-
temp
2+
test

‎dist/easy.qrcode.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "easyqrcodejs",
3-
"version": "4.2.1",
3+
"version": "4.3.0",
44
"description": "Cross-browser QRCode generator for pure javascript. Support Canvas, SVG and Table drawing methods. Support Dot style, Logo, Background image, Colorful, Title etc. settings. Support Angular, Vue.js, React, Next.js framework. Support binary(hex) data mode.(Running with DOM on client side)",
55
"main": "dist/easy.qrcode.min.js",
66
"scripts": {},

‎readme.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,8 @@ var qrcode = new QRCode(DOM_object, options_object);
196196
colorLight : "#ffffff",
197197
correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
198198

199-
// ====== dotScale
200-
/*
199+
// ====== dotScale
200+
/*
201201
dotScale: 1, // For body block, must be greater than 0, less than or equal to 1. default is 1
202202
203203
dotScaleTiming: 1, // Dafault for timing block , must be greater than 0, less than or equal to 1. default is 1
@@ -229,7 +229,9 @@ var qrcode = new QRCode(DOM_object, options_object);
229229
/*
230230
backgroundImage: '', // Background Image
231231
backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.
232-
autoColor: false,
232+
autoColor: false, // Automatic color adjustment(for data block)
233+
autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
234+
autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
233235
*/
234236

235237
// ====== Colorful
@@ -315,7 +317,7 @@ var qrcode = new QRCode(DOM_object, options_object);
315317
| **width** | N | Number | `256` | Width |   |
316318
| **height** | N | Number | `256` | Height |   |
317319
| **colorDark** | N | String | `#000000` | Dark CSS color, `rgba(0,0,0,0)`|   |
318-
| **colorLight** | N | String | `#ffffff` | Light CSS color, `rgba(0,0,0,0)` |   |
320+
| **colorLight** | N | String | `#ffffff` | Light CSS color, `rgba(255,255,255,0)` |   |
319321
| **correctLevel** | N | Enum | `QRCode.CorrectLevel.H` | `QRCode.CorrectLevel.H`<br/>`QRCode.CorrectLevel.Q` <br/> `QRCode.CorrectLevel.M` <br/> `QRCode.CorrectLevel.L`| &nbsp; |
320322
| Dot style| --- | ---|---|---|---|
321323
| **dotScale** | N | Number | `1.0` |Dot style scale. Ranges: `0-1.0` | &nbsp; |
@@ -339,7 +341,9 @@ var qrcode = new QRCode(DOM_object, options_object);
339341
| Backgroud Image options| ---|--- |---|---|---|
340342
| **backgroundImage** | N | String | `undefined` | Background Image Path or Base64 encoded Image. If use relative address, relative to `easy.qrcode.min.js` | &nbsp; |
341343
| **backgroundImageAlpha** | N | Number | `1.0` | Background image transparency. Ranges: `0-1.0` | &nbsp; |
342-
| **autoColor** | N | Boolean | `false` | Automatic color adjustment | &nbsp; |
344+
| **autoColor** | N | Boolean | `false` | Automatic color adjustment(for data block) | &nbsp; |
345+
| **autoColorDark** | N | String | `rgba(0, 0, 0, .6)` | Automatic color: dark CSS color | &nbsp; |
346+
| **autoColorLight** | N | String | `rgba(255, 255, 255, .7)` | Automatic color: light CSS color | &nbsp; |
343347
| Posotion Pattern Color options| --- | ---|---|---|---|
344348
| **PO** | N | String | `undefined` | Global Posotion Outer CSS color. if not set, the defaut is `colorDark` | &nbsp; |
345349
| **PI** | N | String | `undefined` | Global Posotion Inner CSS color. if not set, the defaut is `colorDark` | &nbsp; |

‎src/easy.qrcode.js‎

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
* Cross-browser QRCode generator for pure javascript. Support Canvas, SVG and Table drawing methods. Support Dot style, Logo, Background image, Colorful, Title etc. settings. Support Angular, Vue.js, React, Next.js framework. Support binary(hex) data mode.(Running with DOM on client side)
55
*
6-
* Version 4.2.1
6+
* Version 4.3.0
77
*
88
* @author [ [email protected] ]
99
*
@@ -1301,7 +1301,7 @@
13011301
if (this._htOption.onRenderingEnd) {
13021302
if (!this.dataURL) {
13031303
console.error(
1304-
"Can not get base64 data, please check: 1. published the page and image to the server 2. The image request support CORS"
1304+
"Can not get base64 data, please check: 1. Published the page and image to the server 2. The image request support CORS 3. Configured `crossOrigin:'anonymous'` option"
13051305
)
13061306
}
13071307
this._htOption.onRenderingEnd(this._htOption, this.dataURL);
@@ -1508,6 +1508,52 @@
15081508
var eye = oQRCode.getEye(row, col); // { isDark: true/false, type: PO_TL, PI_TL, PO_TR, PI_TR, PO_BL, PI_BL };
15091509

15101510
var nowDotScale = _htOption.dotScale;
1511+
1512+
_oContext.lineWidth = 0;
1513+
// Color handler
1514+
var dColor;
1515+
var lColor;
1516+
if (eye) {
1517+
dColor = _htOption[eye.type] || _htOption[eye.type.substring(
1518+
0, 2)] ||
1519+
_htOption.colorDark;
1520+
lColor = _htOption.colorLight;
1521+
} else {
1522+
if (_htOption.backgroundImage) {
1523+
1524+
lColor = "rgba(0,0,0,0)";
1525+
if (row == 6) {
1526+
dColor = _htOption.timing_H || _htOption.timing || _htOption.colorDark;
1527+
} else if (col == 6) {
1528+
dColor = _htOption.timing_V || _htOption.timing ||
1529+
_htOption.colorDark;
1530+
} else {
1531+
1532+
if (_htOption.autoColor) {
1533+
dColor = _htOption.autoColorDark;
1534+
lColor = _htOption.autoColorLight;
1535+
} else {
1536+
dColor = _htOption.colorDark;
1537+
}
1538+
}
1539+
1540+
} else {
1541+
if (row == 6) {
1542+
dColor = _htOption.timing_H || _htOption.timing || _htOption.colorDark;
1543+
} else if (col == 6) {
1544+
dColor = _htOption.timing_V || _htOption.timing ||
1545+
_htOption.colorDark;
1546+
} else {
1547+
dColor = _htOption.colorDark;
1548+
}
1549+
lColor = _htOption.colorLight;
1550+
}
1551+
}
1552+
_oContext.strokeStyle = bIsDark ? dColor :
1553+
lColor;
1554+
_oContext.fillStyle = bIsDark ? dColor :
1555+
lColor;
1556+
15111557
if (eye) {
15121558
if (eye.type == 'AO') {
15131559
nowDotScale = _htOption.dotScaleAO;
@@ -1519,17 +1565,6 @@
15191565

15201566
// Is eye
15211567
bIsDark = eye.isDark;
1522-
var type = eye.type;
1523-
1524-
// PX_XX, PX, colorDark, colorLight
1525-
var eyeColorDark = _htOption[type] || _htOption[type.substring(0, 2)] ||
1526-
_htOption.colorDark;
1527-
1528-
_oContext.lineWidth = 0;
1529-
_oContext.strokeStyle = bIsDark ? eyeColorDark : _htOption.colorLight;
1530-
_oContext.fillStyle = bIsDark ? eyeColorDark : _htOption.colorLight;
1531-
1532-
// _oContext.fillRect(nLeft, _htOption.titleHeight + nTop, nWidth, nHeight);
15331568

15341569

15351570
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
@@ -1538,37 +1573,9 @@
15381573
nowDotScale);
15391574

15401575
} else {
1541-
_oContext.lineWidth = 0;
1542-
_oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
1543-
_oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
1544-
1545-
if (_htOption.backgroundImage) {
1546-
1547-
if (_htOption.autoColor) {
1548-
_oContext.strokeStyle = bIsDark ? "rgba(0, 0, 0, .6)" :
1549-
"rgba(255, 255, 255, .7)";
1550-
_oContext.fillStyle = bIsDark ? "rgba(0, 0, 0, .6)" :
1551-
"rgba(255, 255, 255, .7)";
1552-
} else {
1553-
_oContext.strokeStyle = bIsDark ? _htOption.colorDark :
1554-
"rgba(0,0,0,0)";
1555-
_oContext.fillStyle = bIsDark ? _htOption.colorDark :
1556-
"rgba(0,0,0,0)";
1557-
_oContext.strokeStyle = _oContext.fillStyle;
1558-
}
1559-
1560-
} else {
1561-
_oContext.strokeStyle = _oContext.fillStyle;
1562-
1563-
1564-
}
15651576

15661577
if (row == 6) {
15671578
// Timing Pattern
1568-
var timingHColorDark = _htOption.timing_H || _htOption.timing ||
1569-
_htOption.colorDark;
1570-
_oContext.fillStyle = bIsDark ? timingHColorDark : _htOption.colorLight;
1571-
_oContext.strokeStyle = _oContext.fillStyle;
15721579

15731580
nowDotScale = _htOption.dotScaleTiming_H;
15741581

@@ -1578,11 +1585,6 @@
15781585
nowDotScale);
15791586
} else if (col == 6) {
15801587
// Timing Pattern
1581-
var timingVColorDark = _htOption.timing_V || _htOption.timing ||
1582-
_htOption.colorDark;
1583-
_oContext.fillStyle = bIsDark ? timingVColorDark : _htOption.colorLight;
1584-
_oContext.strokeStyle = _oContext.fillStyle;
1585-
15861588
nowDotScale = _htOption.dotScaleTiming_V;
15871589

15881590
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
@@ -1891,7 +1893,9 @@
18911893
// ==== Backgroud Image
18921894
backgroundImage: undefined, // Background Image
18931895
backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.
1894-
autoColor: false,
1896+
autoColor: false, // Automatic color adjustment(for data block)
1897+
autoColorDark: "rgba(0, 0, 0, .6)", // Automatic color: dark CSS color
1898+
autoColorLight: "rgba(255, 255, 255, .7)", // Automatic color: light CSS color
18951899

18961900
// ==== Event Handler
18971901
onRenderingStart: undefined,
@@ -1909,7 +1913,6 @@
19091913
// ==== Drawing method
19101914
drawer: 'canvas', // Drawing method: canvas, svg(Chrome, FF, IE9+)
19111915

1912-
19131916
// ==== CORS
19141917
crossOrigin: null // String which specifies the CORS setting to use when retrieving the image. null means that the crossOrigin attribute is not set.
19151918
};
@@ -2016,7 +2019,12 @@
20162019
this._android = _getAndroid();
20172020
this._el = el;
20182021
this._oQRCode = null;
2019-
this._oDrawing = new Drawing(this._el, this._htOption);
2022+
2023+
var _htOptionClone={};
2024+
for(var i in this._htOption){
2025+
_htOptionClone[i] = this._htOption[i];
2026+
}
2027+
this._oDrawing = new Drawing(this._el, _htOptionClone);
20202028

20212029
if (this._htOption.text) {
20222030
this.makeCode(this._htOption.text);

0 commit comments

Comments
 (0)