Skip to content

Commit a54e39e

Browse files
ushelpushelp
committed
Add maxLogoWidth&maxLogoHeight options
Add maxLogoWidth&maxLogoHeight options
1 parent 53ce75e commit a54e39e

File tree

4 files changed

+81
-37
lines changed

4 files changed

+81
-37
lines changed

‎QRCode.js‎

Lines changed: 67 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
* React Native QRCode generation component. Can generate standard QRCode image or base64 image data url text. Cross-browser QRCode generator for pure javascript. Support Dot style, Logo, Background image, Colorful, Title etc. settings. support binary mode.
55
*
6-
* Version 3.9.5
6+
* Version 4.0.0
77
*
88
* @author [ [email protected] ]
99
*
@@ -149,7 +149,8 @@ QRCodeModel.prototype = {
149149
if (row + r <= -1 || this.moduleCount <= row + r) continue;
150150
for (var c = -1; c <= 7; c++) {
151151
if (col + c <= -1 || this.moduleCount <= col + c) continue;
152-
if ((0 <= r && r <= 6 && (c == 0 || c == 6)) || (0 <= c && c <= 6 && (r == 0 || r == 6)) || (2 <=
152+
if ((0 <= r && r <= 6 && (c == 0 || c == 6)) || (0 <= c && c <= 6 && (r == 0 || r == 6)) || (
153+
2 <=
153154
r && r <= 4 &&
154155
2 <= c && c <= 4)) {
155156
this.modules[row + r][col + c][0] = true;
@@ -611,7 +612,8 @@ var QRUtil = {
611612
if (qrCode.isDark(row, col) && !qrCode.isDark(row, col + 1) && qrCode.isDark(row, col + 2) &&
612613
qrCode.isDark(
613614
row,
614-
col + 3) && qrCode.isDark(row, col + 4) && !qrCode.isDark(row, col + 5) && qrCode.isDark(
615+
col + 3) && qrCode.isDark(row, col + 4) && !qrCode.isDark(row, col + 5) && qrCode
616+
.isDark(
615617
row, col + 6)) {
616618
lostPoint += 40;
617619
}
@@ -664,8 +666,9 @@ for (var i = 0; i < 8; i++) {
664666
QRMath.EXP_TABLE[i] = 1 << i;
665667
}
666668
for (var i = 8; i < 256; i++) {
667-
QRMath.EXP_TABLE[i] = QRMath.EXP_TABLE[i - 4] ^ QRMath.EXP_TABLE[i - 5] ^ QRMath.EXP_TABLE[i - 6] ^ QRMath.EXP_TABLE[
668-
i - 8];
669+
QRMath.EXP_TABLE[i] = QRMath.EXP_TABLE[i - 4] ^ QRMath.EXP_TABLE[i - 5] ^ QRMath.EXP_TABLE[i - 6] ^ QRMath
670+
.EXP_TABLE[
671+
i - 8];
669672
}
670673
for (var i = 0; i < 255; i++) {
671674
QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]] = i;
@@ -1117,7 +1120,8 @@ Drawing.prototype.draw = function(oQRCode) {
11171120
_oContext.fillRect(0, _htOption.quietZone, _htOption.quietZone, t._canvas.height - _htOption.quietZone *
11181121
2);
11191122
// right
1120-
_oContext.fillRect(t._canvas.width - _htOption.quietZone, _htOption.quietZone, _htOption.quietZone, t._canvas
1123+
_oContext.fillRect(t._canvas.width - _htOption.quietZone, _htOption.quietZone, _htOption.quietZone, t
1124+
._canvas
11211125
.height - _htOption.quietZone * 2);
11221126
// bottom
11231127
_oContext.fillRect(0, t._canvas.height - _htOption.quietZone, t._canvas.width, _htOption.quietZone);
@@ -1162,7 +1166,8 @@ Drawing.prototype.draw = function(oQRCode) {
11621166

11631167
var bIsDark = oQRCode.isDark(row, col);
11641168

1165-
var eye = oQRCode.getEye(row, col); // { isDark: true/false, type: PO_TL, PI_TL, PO_TR, PI_TR, PO_BL, PI_BL };
1169+
var eye = oQRCode.getEye(row,
1170+
col); // { isDark: true/false, type: PO_TL, PI_TL, PO_TR, PI_TR, PO_BL, PI_BL };
11661171

11671172
var nowDotScale = _htOption.dotScale;
11681173

@@ -1234,7 +1239,7 @@ Drawing.prototype.draw = function(oQRCode) {
12341239
} else {
12351240
nowDotScale = 1;
12361241
}
1237-
1242+
12381243
if (_htOption.backgroundImage && _htOption.autoColor) {
12391244
dColor = ((eye.type == 'AO') ? _htOption.AI : _htOption.AO) ||
12401245
_htOption.autoColorDark;
@@ -1267,13 +1272,15 @@ Drawing.prototype.draw = function(oQRCode) {
12671272

12681273
if (_htOption.backgroundImage) {
12691274

1270-
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight + nTop +
1275+
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
1276+
nTop +
12711277
nHeight * (1 -
12721278
nowDotScale) / 2, nWidth * nowDotScale, nHeight * nowDotScale);
12731279

12741280
} else {
12751281

1276-
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight + nTop +
1282+
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
1283+
nTop +
12771284
nHeight * (1 -
12781285
nowDotScale) / 2, nWidth * nowDotScale, nHeight * nowDotScale);
12791286

@@ -1295,13 +1302,15 @@ Drawing.prototype.draw = function(oQRCode) {
12951302
_oContext.font = _htOption.titleFont;
12961303
_oContext.fillStyle = _htOption.titleColor;
12971304
_oContext.textAlign = 'center';
1298-
_oContext.fillText(_htOption.title, t._canvas.width / 2, this._htOption.quietZone + this._htOption.titleTop);
1305+
_oContext.fillText(_htOption.title, t._canvas.width / 2, this._htOption.quietZone + this._htOption
1306+
.titleTop);
12991307
}
13001308

13011309
if (_htOption.subTitle) {
13021310
_oContext.font = _htOption.subTitleFont;
13031311
_oContext.fillStyle = _htOption.subTitleColor;
1304-
_oContext.fillText(_htOption.subTitle, t._canvas.width / 2, this._htOption.quietZone + this._htOption.subTitleTop);
1312+
_oContext.fillText(_htOption.subTitle, t._canvas.width / 2, this._htOption.quietZone + this._htOption
1313+
.subTitleTop);
13051314
}
13061315

13071316
if (_htOption.logo) {
@@ -1315,26 +1324,18 @@ Drawing.prototype.draw = function(oQRCode) {
13151324
imgContainerW = imgContainerH;
13161325
}
13171326

1318-
if (_htOption.logoWidth) {
1327+
if (_htOption.logoMaxWidth) {
1328+
imgContainerW = Math.round(_htOption.logoMaxWidth);
1329+
} else if (_htOption.logoWidth) {
13191330
imgContainerW = Math.round(_htOption.logoWidth);
13201331
}
1321-
if (_htOption.logoHeight) {
1332+
1333+
if (_htOption.logoMaxHeight) {
1334+
imgContainerH = Math.round(_htOption.logoMaxHeight);
1335+
} else if (_htOption.logoHeight) {
13221336
imgContainerH = Math.round(_htOption.logoHeight);
13231337
}
13241338

1325-
var imgContainerX = (_htOption.width + _htOption.quietZone * 2 - imgContainerW) / 2;
1326-
var imgContainerY = (_htOption.height + _htOption.titleHeight + _htOption.quietZone *
1327-
2 - imgContainerH) / 2;
1328-
1329-
// Did Not Use Transparent Logo Image
1330-
if (!_htOption.logoBackgroundTransparent) {
1331-
//if (!_htOption.logoBackgroundColor) {
1332-
//_htOption.logoBackgroundColor = '#ffffff';
1333-
//}
1334-
_oContext.fillStyle = _htOption.logoBackgroundColor;
1335-
1336-
_oContext.fillRect(imgContainerX, imgContainerY, imgContainerW, imgContainerH);
1337-
}
13381339
var nw;
13391340
var nh;
13401341
if (typeof img.naturalWidth == "undefined") {
@@ -1347,10 +1348,47 @@ Drawing.prototype.draw = function(oQRCode) {
13471348
nh = img.naturalHeight;
13481349
}
13491350

1351+
if (_htOption.logoMaxWidth || _htOption.logoMaxHeight) {
1352+
if (_htOption.logoMaxWidth && nw <= imgContainerW) {
1353+
imgContainerW = nw;
1354+
}
1355+
1356+
if (_htOption.logoMaxHeight && nh <= imgContainerH) {
1357+
imgContainerH = nh;
1358+
}
1359+
if (nw <= imgContainerW && nh <= imgContainerH) {
1360+
imgContainerW = nw;
1361+
imgContainerH = nh;
1362+
}
1363+
}
1364+
1365+
var imgContainerX = (_htOption.width + _htOption.quietZone * 2 - imgContainerW) / 2;
1366+
var imgContainerY = (_htOption.height + _htOption.titleHeight + _htOption.quietZone *
1367+
2 - imgContainerH) / 2;
1368+
13501369
var imgScale = Math.min(imgContainerW / nw, imgContainerH / nh);
13511370
var imgW = nw * imgScale;
13521371
var imgH = nh * imgScale;
13531372

1373+
if (_htOption.logoMaxWidth || _htOption.logoMaxHeight) {
1374+
imgContainerW = imgW;
1375+
imgContainerH = imgH;
1376+
imgContainerX = (_htOption.width + _htOption.quietZone * 2 - imgContainerW) / 2;
1377+
imgContainerY = (_htOption.height + _htOption.titleHeight + _htOption
1378+
.quietZone *
1379+
2 - imgContainerH) / 2;
1380+
1381+
}
1382+
1383+
// Did Not Use Transparent Logo Image
1384+
if (!_htOption.logoBackgroundTransparent) {
1385+
//if (!_htOption.logoBackgroundColor) {
1386+
//_htOption.logoBackgroundColor = '#ffffff';
1387+
//}
1388+
_oContext.fillStyle = _htOption.logoBackgroundColor;
1389+
1390+
_oContext.fillRect(imgContainerX, imgContainerY, imgContainerW, imgContainerH);
1391+
}
13541392
_oContext.drawImage(img, imgContainerX + (imgContainerW - imgW) / 2, imgContainerY +
13551393
(imgContainerH - imgH) / 2, imgW, imgH);
13561394

@@ -1449,6 +1487,8 @@ function QRCode(canvas, vOption) {
14491487
logo: undefined,
14501488
logoWidth: undefined,
14511489
logoHeight: undefined,
1490+
logoMaxWidth: undefined,
1491+
logoMaxHeight: undefined,
14521492
logoBackgroundColor: '#ffffff',
14531493
logoBackgroundTransparent: false,
14541494

‎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": "easyqrcode-react-native",
3-
"version": "3.9.5",
3+
"version": "4.0.0",
44
"description": "React Native QRCode generation component. Can get standard base64 image data url text or save image to file. Cross-browser QRCode generator for pure javascript. Support Dot style, Logo, Background image, Colorful, Title etc. settings. support binary mode.",
55
"main": "QRCode.min.js",
66
"scripts": {},

‎readme.md‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -179,11 +179,13 @@ var qrcode = new QRCode(canvas_object, options_object);
179179

180180
// ====== Logo
181181
/*
182-
logo:"https://avatars1.githubusercontent.com/u/4082017?s=160&v=4", // support: Static Image Resources, Network Images, Base64 Uri Data Images
183-
logoWidth:80, // width. default is automatic width
184-
logoHeight:80, // height. default is automatic height
185-
logoBackgroundColor:'#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
186-
logoBackgroundTransparent:false, // Whether use transparent image, default is false
182+
logo: "https://avatars1.githubusercontent.com/u/4082017?s=160&v=4", // support: Static Image Resources, Network Images, Base64 Uri Data Images
183+
logoWidth: 80, // fixed logo width. default is `width/3.5`
184+
logoHeight: 80, // fixed logo height. default is `heigth/3.5`
185+
logoMaxWidth: undefined, // Maximum logo width. if set will ignore `logoWidth` value
186+
logoMaxHeight: undefined, // Maximum logo height. if set will ignore `logoHeight` value
187+
logoBackgroundColor: '#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
188+
logoBackgroundTransparent: false, // Whether use transparent image, default is false
187189
*/
188190

189191
// ====== Backgroud Image
@@ -278,8 +280,10 @@ var qrcode = new QRCode(canvas_object, options_object);
278280
| **quietZoneColor** | N | String | `rgba(0,0,0,0)` | Background CSS color to Quiet Zone |
279281
| Logo options| --- | ---|---|---|
280282
| **logo** | N | String | `undefined` | support: Static Image Resources, Network Images(`http://`, `https://`, `ftp://`), Base64 Uri Data Images |
281-
| **logoWidth** | N | Number | `undefined` | Height |
282-
| **logoHeight** | N | Number | `undefined` | Width |
283+
| **logoWidth** | N | Number | `width/3.5` | Fixed logo width. |
284+
| **logoHeight** | N | Number | `height/3.5` | fixed logo height. |
285+
| **maxLogoWidth** | N | Number | `undefined` | Maximum logo width. if set will ignore `logoWidth` value. |
286+
| **maxLogoHeight** | N | Number | `undefined` | Maximum logo height. if set will ignore `logoHeight` value. |
283287
| **logoBackgroundTransparent** | N | Boolean | `false` | Whether the background transparent image(`PNG`) shows transparency. When `true`, `logoBackgroundColor` is invalid |
284288
| **logoBackgroundColor** | N | String | `#ffffff` | Set Background CSS Color when image background transparent. Valid when `logoBackgroundTransparent` is `false` |
285289
| Backgroud Image options| ---|--- |---|---|

0 commit comments

Comments
 (0)