Skip to content

Commit 6eea3ec

Browse files
committed
New version 3.6.0 realese
1. add `tootip` option to control whether show image title 2. add `resize(width, height)` method 3. add `onRenderingEnd` event option, can get Base64 data when rendering end.
1 parent ddef612 commit 6eea3ec

File tree

6 files changed

+75
-50
lines changed

6 files changed

+75
-50
lines changed

demo/demo.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -535,7 +535,11 @@
535535
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
536536

537537

538-
dotScale: 0.5
538+
dotScale: 0.5,
539+
540+
onRenderingEnd:function(options, dataURL){
541+
console.info(dataURL);
542+
}
539543
}
540544

541545
}

demo/demo_AMD.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -545,7 +545,11 @@
545545
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
546546

547547

548-
dotScale: 0.5
548+
dotScale: 0.5,
549+
550+
onRenderingEnd:function(options, dataURL){
551+
console.info(dataURL);
552+
}
549553
}
550554

551555
}

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": "3.5.4",
3+
"version": "3.6.0",
44
"description": "A feature-rich cross-browser QRCode generator for pure javascript. Support Dot style, Logo, Background image, Colorful, Title, etc. Support Angular, Vue.js, React framework.(Running with DOM on client side)",
55
"main": "dist/easy.qrcode.min.js",
66
"scripts": {},

readme.md

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -250,12 +250,18 @@ var qrcode = new QRCode(DOM_object, options_object);
250250
// ===== Event Handler
251251
/*
252252
onRenderingStart: undefined,
253+
onRenderingEnd: undefined,
253254
*/
254255
255256
// ===== Versions
256257
/*
257-
version: 0 // The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length.
258-
*/
258+
version: 0, // The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length.
259+
*/
260+
261+
// ===== Tooltip
262+
/*
263+
tooltip: false // Whether set the QRCode Text as the title attribute value of the QRCode div
264+
*/
259265
}
260266
```
261267

@@ -265,8 +271,8 @@ var qrcode = new QRCode(DOM_object, options_object);
265271
| **text** | Y | String |`''` | Text |   |
266272
| **width** | N | Number | `256` | Width |   |
267273
| **height** | N | Number | `256` | Height |   |
268-
| **colorDark** | N | String | `#000000` | Dark CSS color |   |
269-
| **colorLight** | N | String | `#ffffff` | Light CSS color |   |
274+
| **colorDark** | N | String | `#000000` | Dark CSS color, `transparent`|   |
275+
| **colorLight** | N | String | `#ffffff` | Light CSS color, `transparent` |   |
270276
| **correctLevel** | N | Enum | `QRCode.CorrectLevel.H` | `QRCode.CorrectLevel.H`<br/>`QRCode.CorrectLevel.Q` <br/> `QRCode.CorrectLevel.M` <br/> `QRCode.CorrectLevel.L`| &nbsp; |
271277
| **dotScale** | N | Number | `1.0` |Dot style required Patterns. Ranges: `0-1.0` | &nbsp; |
272278
| Quiet Zone| --- | ---|---|---|---|
@@ -311,10 +317,12 @@ var qrcode = new QRCode(DOM_object, options_object);
311317
| **subTitleColor** | N | String | `#4F4F4F` | CSS color | &nbsp; |
312318
| **subTitleTop** | N | Number | `0` | draws y coordinates. default is 0| &nbsp; |
313319
| Event Handler options| --- | ---|---|---|---|
314-
| **onRenderingStart(qrCodeOptions)** | N | Function | `undefined` | Callback function when rendering start work. can use to hide loading state or handling. | &nbsp; |
320+
| **onRenderingStart(qrCodeOptions)** | N | Function | `undefined` | Callback function when the rendering start. can use to hide loading state or handling. | &nbsp; |
321+
| **onRenderingEnd(qrCodeOptions, base64DataURL)** | N | Function | `undefined` | Callback function when the rendering ends. `base64DataURL` parameter is the base64 data of QRCode image(if not support canvas return `null`). | &nbsp; |
315322
| Version options| --- | ---|---|---|
316323
| **version** | N | Number | `0` | The symbol versions of QR Code range from Version `1` to Version `40`. default 0 means automatically choose the closest version based on the text length. [Information capacity and versions of QR Codes](https://www.qrcode.com/en/about/version.html) **NOTE**: If you set a value less than the minimum version available for text, the minimum version is automatically used. | &nbsp; |
317-
324+
| Tooltip options| --- | ---|---|---|
325+
| **tooltip** | N | Boolean | `false` | Whether set the QRCode Text as the title attribute value of the QRCode div. | &nbsp; |
318326

319327

320328

@@ -333,7 +341,12 @@ var qrcode = new QRCode(DOM_object, options_object);
333341
qrcode.makeCode("https://github.com/ushelp/EasyQRCodeJS"); // make another code text.
334342
```
335343

336-
344+
- resize(widht, height)
345+
346+
```JS
347+
qrcode.resize(480, 480); // Resize the image
348+
```
349+
337350

338351
## Angular Support
339352

src/easy.qrcode.js

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1277,6 +1277,9 @@
12771277
if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
12781278
elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";
12791279
}
1280+
if(this._htOption.onRenderingEnd){
1281+
this._htOption.onRenderingEnd(this._htOption, null);
1282+
}
12801283
};
12811284

12821285
/**
@@ -1290,9 +1293,23 @@
12901293
})() : (function() { // Drawing in Canvas
12911294
function _onMakeImage() {
12921295
// this._elImage.crossOrigin='Anonymous';
1293-
this._elImage.src = this._elCanvas.toDataURL("image/png");
1294-
this._elImage.style.display = "inline";
1295-
this._elCanvas.style.display = "none";
1296+
try{
1297+
var dataURL=this._elCanvas.toDataURL("image/png");
1298+
this._elImage.src =dataURL
1299+
this.dataURL=dataURL;
1300+
this._elImage.style.display = "inline";
1301+
this._elCanvas.style.display = "none";
1302+
}catch(e){
1303+
console.error(e)
1304+
}
1305+
1306+
if(this._htOption.onRenderingEnd){
1307+
if(!this.dataURL){
1308+
console.error("Can not get base64 data, please check: 1. published the page and image to the server 2. The image request support CORS")
1309+
}
1310+
this._htOption.onRenderingEnd(this._htOption, this.dataURL);
1311+
}
1312+
12961313
}
12971314

12981315
// Android 2.1 bug workaround
@@ -1384,6 +1401,7 @@
13841401
this._el.appendChild(this._elImage);
13851402

13861403
this._bSupportDataURI = null;
1404+
this.dataURL=null;
13871405
};
13881406

13891407
/**
@@ -1622,8 +1640,6 @@
16221640

16231641
}
16241642

1625-
1626-
16271643
}
16281644

16291645
};
@@ -1635,8 +1651,6 @@
16351651
if (this._bIsPainted) {
16361652
_safeSetDataURI.call(this, _onMakeImage);
16371653
}
1638-
1639-
console.info(this._elCanvas.toDataURL())
16401654
};
16411655

16421656
/**
@@ -1662,8 +1676,6 @@
16621676
this._el.innerHTML = '';
16631677
};
16641678

1665-
1666-
16671679
/**
16681680
* @private
16691681
* @param {Number} nNumber
@@ -1740,31 +1752,7 @@
17401752
return replacedText.length + (replacedText.length != sText ? 3 : 0);
17411753
}
17421754

1743-
/**
1744-
* @class QRCode
1745-
* @constructor
1746-
* @example
1747-
* new QRCode(document.getElementById("test"), "QRCode");
1748-
*
1749-
* @example
1750-
* var oQRCode = new QRCode("test", {
1751-
* text : "QRCode",
1752-
* width : 128,
1753-
* height : 128
1754-
* });
1755-
*
1756-
* oQRCode.clear(); // Clear the QRCode.
1757-
* oQRCode.makeCode("QRCode"); // Re-create the QRCode.
1758-
*
1759-
* @param {HTMLElement|String} el target element or 'id' attribute of element.
1760-
* @param {Object|String} vOption
1761-
* @param {String} vOption.text QRCode link data
1762-
* @param {Number} [vOption.width=256]
1763-
* @param {Number} [vOption.height=256]
1764-
* @param {String} [vOption.colorDark="#000000"]
1765-
* @param {String} [vOption.colorLight="#ffffff"]
1766-
* @param {QRCode.CorrectLevel} [vOption.correctLevel=QRCode.CorrectLevel.H] [L|M|Q|H]
1767-
*/
1755+
17681756
QRCode = function(el, vOption) {
17691757
this._htOption = {
17701758
width: 256,
@@ -1823,10 +1811,13 @@
18231811

18241812
// ==== Event Handler
18251813
onRenderingStart: undefined,
1814+
onRenderingEnd: undefined,
18261815

18271816
// ==== Versions
1828-
version: 0 // The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length.
1829-
1817+
version: 0, // The symbol versions of QR Code range from Version 1 to Version 40. default 0 means automatically choose the closest version based on the text length.
1818+
1819+
// ==== Tooltip
1820+
tooltip: false // Whether set the QRCode Text as the title attribute value of the image
18301821
};
18311822

18321823
if (typeof vOption === 'string') {
@@ -1883,11 +1874,13 @@
18831874
* @param {String} sText link data
18841875
*/
18851876
QRCode.prototype.makeCode = function(sText) {
1886-
1877+
18871878
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption), this._htOption.correctLevel);
18881879
this._oQRCode.addData(sText);
18891880
this._oQRCode.make();
1890-
this._el.title = sText;
1881+
if(this._htOption.tooltip){
1882+
this._el.title = sText;
1883+
}
18911884
this._oDrawing.draw(this._oQRCode);
18921885
// this.makeImage();
18931886
};
@@ -1911,6 +1904,17 @@
19111904
QRCode.prototype.clear = function() {
19121905
this._oDrawing.remove();
19131906
};
1907+
1908+
/**
1909+
* Resize the QRCode
1910+
*/
1911+
QRCode.prototype.resize = function(width, height) {
1912+
this._htOption.width=width;
1913+
this._htOption.height=height;
1914+
1915+
this._oDrawing.draw(this._oQRCode);
1916+
};
1917+
19141918

19151919

19161920
/**

0 commit comments

Comments
 (0)