awesome-qr - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

awesome-qr.js

@@ -22,3 +22,3 @@ /**
 (function () {
-    //---------------------------------------------------------------------
+//---------------------------------------------------------------------
 // QRCode for JavaScript
@@ -101,2 +101,26 @@ //
         }, make: function () {
+            /////////////////////////////////////////////
+            if (this.typeNumber < 1) {
+                var typeNumber = 1;
+                for (typeNumber = 1; typeNumber < 40; typeNumber++) {
+                    var rsBlocks = QRRSBlock.getRSBlocks(typeNumber, this.errorCorrectLevel);
+
+                    var buffer = new QRBitBuffer();
+                    var totalDataCount = 0;
+                    for (var i = 0; i < rsBlocks.length; i++) {
+                        totalDataCount += rsBlocks[i].dataCount;
+                    }
+
+                    for (var i = 0; i < this.dataList.length; i++) {
+                        var data = this.dataList[i];
+                        buffer.put(data.mode, 4);
+                        buffer.put(data.getLength(), QRUtil.getLengthInBits(data.mode, typeNumber));
+                        data.write(buffer);
+                    }
+                    if (buffer.getLengthInBits() <= totalDataCount * 8)
+                        break;
+                }
+                this.typeNumber = typeNumber;
+            }
+            /////////////////////////////////////////////
             this.makeImpl(!1, this.getBestMaskPattern())
@@ -852,6 +876,14 @@ }, makeImpl: function (test, maskPattern) {
 
-            _oContext.rect(whiteMargin ? 0 : -margin, whiteMargin ? 0 : -margin, size, size);
-            _oContext.fillStyle = "#ffffff";
-            _oContext.fill();
+            //_oContext.rect(whiteMargin ? 0 : -margin, whiteMargin ? 0 : -margin, size, size);
+            //_oContext.fillStyle = "#ffffff";
+            //_oContext.fill();
 
+            var _bkgCanvas = document.createElement("canvas");
+            _bkgCanvas.width = size;
+            _bkgCanvas.height = size;
+            var _bContext = _bkgCanvas.getContext("2d");
+
+            var _maskCanvas = undefined;
+            var _mContext = undefined;
+
             if (_htOption.backgroundImage !== undefined) {
@@ -862,12 +894,39 @@ if (_htOption.autoColor) {
                 }
-                _oContext.drawImage(_htOption.backgroundImage,
-                    0, 0, _htOption.backgroundImage.width, _htOption.backgroundImage.height,
-                    whiteMargin ? 0 : -margin, whiteMargin ? 0 : -margin, whiteMargin ? viewportSize : size, whiteMargin ? viewportSize : size);
-                _oContext.rect(whiteMargin ? 0 : -margin, whiteMargin ? 0 : -margin, size, size);
-                _oContext.fillStyle = backgroundDimming;
-                _oContext.fill();
+
+                if (_htOption.maskedDots) {
+                    _maskCanvas = document.createElement("canvas");
+                    _maskCanvas.width = size;
+                    _maskCanvas.height = size;
+                    _mContext = _maskCanvas.getContext("2d");
+                    /*
+                     _mContext.drawImage(_htOption.backgroundImage,
+                     0, 0, _htOption.backgroundImage.width, _htOption.backgroundImage.height,
+                     whiteMargin ? 0 : -margin, whiteMargin ? 0 : -margin, whiteMargin ? viewportSize : size, whiteMargin ? viewportSize : size);
+                     */
+                    _mContext.drawImage(_htOption.backgroundImage,
+                        0, 0, _htOption.backgroundImage.width, _htOption.backgroundImage.height,
+                        0, 0, size, size);
+
+                    _bContext.rect(0, 0, size, size);
+                    _bContext.fillStyle = "#ffffff";
+                    _bContext.fill();
+                } else {
+                    /*
+                     _bContext.drawImage(_htOption.backgroundImage,
+                     0, 0, _htOption.backgroundImage.width, _htOption.backgroundImage.height,
+                     whiteMargin ? 0 : -margin, whiteMargin ? 0 : -margin, whiteMargin ? viewportSize : size, whiteMargin ? viewportSize : size);
+                     */
+                    _bContext.drawImage(_htOption.backgroundImage,
+                        0, 0, _htOption.backgroundImage.width, _htOption.backgroundImage.height,
+                        0, 0, size, size);
+                    _bContext.rect(0, 0, size, size);
+                    _bContext.fillStyle = backgroundDimming;
+                    _bContext.fill();
+                }
+
+
             } else {
-                _oContext.rect(0, 0, size, size);
-                _oContext.fillStyle = "#ffffff";
-                _oContext.fill();
+                _bContext.rect(0, 0, size, size);
+                _bContext.fillStyle = "#ffffff";
+                _bContext.fill();
             }
@@ -882,3 +941,42 @@
 
-            _oContext.fillStyle = "rgba(255, 255, 255, 0.6)";
+            var xyOffset = (1 - dotScale) * 0.5;
+            for (var row = 0; row < nCount; row++) {
+                for (var col = 0; col < nCount; col++) {
+                    var bIsDark = oQRCode.isDark(row, col);
+
+                    // var isBlkPosCtr = ((col < 8 && (row < 8 || row >= nCount - 8)) || (col >= nCount - 8 && row < 8) || (col < nCount - 4 && col >= nCount - 4 - 5 && row < nCount - 4 && row >= nCount - 4 - 5));
+                    var isBlkPosCtr = ((col < 8 && (row < 8 || row >= nCount - 8)) || (col >= nCount - 8 && row < 8));
+                    var isBlkPos = ((col < 7 && (row < 7 || row >= nCount - 7)) || (col >= nCount - 7 && row < 7));
+                    var bProtected = (row === 6 || col === 6 || isBlkPosCtr);
+
+                    for (var i = 0; i < agnPatternCenter.length - 1; i++) {
+                        bProtected = bProtected || (row >= agnPatternCenter[i] - 2 && row <= agnPatternCenter[i] + 2 && col >= agnPatternCenter[i] - 2 && col <= agnPatternCenter[i] + 2);
+                    }
+
+                    var nLeft = col * nWidth + (bProtected ? 0 : (xyOffset * nWidth));
+                    var nTop = row * nHeight + (bProtected ? 0 : (xyOffset * nHeight));
+                    _oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
+                    _oContext.lineWidth = 0.5;
+                    _oContext.fillStyle = bIsDark ? _htOption.colorDark : "rgba(255, 255, 255, 0.6)"; //_htOption.colorLight;
+                    if (agnPatternCenter.length === 0) {
+                        // if align pattern list is empty, then it means that we don't need to leave room for the align patterns
+                        if (!bProtected)
+                            fillRect_(_oContext, nLeft, nTop, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nWidth, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nHeight, _maskCanvas, bIsDark);
+                    } else {
+                        var inAgnRange = ((col < nCount - 4 && col >= nCount - 4 - 5 && row < nCount - 4 && row >= nCount - 4 - 5));
+                        if (!bProtected && !inAgnRange)
+                            fillRect_(_oContext, nLeft, nTop, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nWidth, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nHeight, _maskCanvas, bIsDark);
+                    }
+                }
+            }
+
+            var protectorStyle = "rgba(255, 255, 255, 0.6)";
+            _oContext.fillStyle = protectorStyle;
+            /*
+             fillRect_(_oContext, 0, 0, 8 * nWidth, 8 * nHeight, maskImg);
+             fillRect_(_oContext, 0, (nCount - 8) * nHeight, 8 * nWidth, 8 * nHeight, maskImg);
+             fillRect_(_oContext, (nCount - 8) * nWidth, 0, 8 * nWidth, 8 * nHeight, maskImg);
+             fillRect_(_oContext, 8 * nWidth, 6 * nHeight, (nCount - 8 - 8) * nWidth, nHeight, maskImg);
+             fillRect_(_oContext, 6 * nWidth, 8 * nHeight, nWidth, (nCount - 8 - 8) * nHeight, maskImg);
+             */
             _oContext.fillRect(0, 0, 8 * nWidth, 8 * nHeight);
@@ -895,6 +993,11 @@ _oContext.fillRect(0, (nCount - 8) * nHeight, 8 * nWidth, 8 * nHeight);
                     var agnY = agnPatternCenter[i];
-                    if (agnX !== 6 && agnX !== edgeCenter && agnY !== 6 && agnY !== edgeCenter) continue;
-                    if (agnX === 6 && (agnY === 6 || agnY === edgeCenter)) continue;
-                    if (agnY === 6 && (agnX === 6 || agnX === edgeCenter)) continue;
-                    drawAgnProtector(_oContext, agnX, agnY, nWidth, nHeight);
+                    if (agnX === 6 && (agnY === 6 || agnY === edgeCenter)) {
+                        continue;
+                    } else if (agnY === 6 && (agnX === 6 || agnX === edgeCenter)) {
+                        continue;
+                    } else if (agnX !== 6 && agnX !== edgeCenter && agnY !== 6 && agnY !== edgeCenter) {
+                        drawAgnProtector(_oContext, agnX, agnY, nWidth, nHeight);
+                    } else {
+                        drawAgnProtector(_oContext, agnX, agnY, nWidth, nHeight);
+                    }
                     // console.log("agnX=" + agnX + ", agnY=" + agnX);
@@ -906,2 +1009,17 @@ }
 
+            /*
+             fillRect_(_oContext, 0, 0, 7 * nWidth, nHeight, _maskCanvas,true);
+             fillRect_(_oContext, (nCount - 7) * nWidth, 0, 7 * nWidth, nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 0, 6 * nHeight, 7 * nWidth, nHeight, _maskCanvas,true);
+             fillRect_(_oContext, (nCount - 7) * nWidth, 6 * nHeight, 7 * nWidth, nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 0, (nCount - 7) * nHeight, 7 * nWidth, nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 0, (nCount - 7 + 6) * nHeight, 7 * nWidth, nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 0, 0, nWidth, 7 * nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 6 * nWidth, 0, nWidth, 7 * nHeight, _maskCanvas,true);
+             fillRect_(_oContext, (nCount - 7) * nWidth, 0, nWidth, 7 * nHeight, _maskCanvas,true);
+             fillRect_(_oContext, (nCount - 7 + 6) * nWidth, 0, nWidth, 7 * nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 0, (nCount - 7) * nHeight, nWidth, 7 * nHeight, _maskCanvas,true);
+             fillRect_(_oContext, 6 * nWidth, (nCount - 7) * nHeight, nWidth, 7 * nHeight, _maskCanvas,true);
+             */
+
             _oContext.fillRect(0, 0, 7 * nWidth, nHeight);
@@ -920,13 +1038,2 @@ _oContext.fillRect((nCount - 7) * nWidth, 0, 7 * nWidth, nHeight);
 
-            for (var i = 0; i < agnPatternCenter.length; i++) {
-                for (var j = 0; j < agnPatternCenter.length; j++) {
-                    var agnX = agnPatternCenter[j];
-                    var agnY = agnPatternCenter[i];
-                    if (agnX !== 6 && agnX !== edgeCenter && agnY !== 6 && agnY !== edgeCenter) continue;
-                    if (agnX === 6 && (agnY === 6 || agnY === edgeCenter)) continue;
-                    if (agnY === 6 && (agnX === 6 || agnX === edgeCenter)) continue;
-                    drawAgn(_oContext, agnX, agnY, nWidth, nHeight);
-                }
-            }
-
             _oContext.fillRect(2 * nWidth, 2 * nHeight, 3 * nWidth, 3 * nHeight);
@@ -940,29 +1047,17 @@ _oContext.fillRect((nCount - 7 + 2) * nWidth, 2 * nHeight, 3 * nWidth, 3 * nHeight);
             }
-
-            var xyOffset = (1 - dotScale) * 0.5;
-            for (var row = 0; row < nCount; row++) {
-                for (var col = 0; col < nCount; col++) {
-                    var bIsDark = oQRCode.isDark(row, col);
-
-                    // var isBlkPosCtr = ((col < 8 && (row < 8 || row >= nCount - 8)) || (col >= nCount - 8 && row < 8) || (col < nCount - 4 && col >= nCount - 4 - 5 && row < nCount - 4 && row >= nCount - 4 - 5));
-                    var isBlkPosCtr = ((col < 8 && (row < 8 || row >= nCount - 8)) || (col >= nCount - 8 && row < 8));
-                    var isBlkPos = ((col < 7 && (row < 7 || row >= nCount - 7)) || (col >= nCount - 7 && row < 7));
-                    var bProtected = (row === 6 || col === 6 || isBlkPosCtr);
-
-                    for (var i = 0; i < agnPatternCenter.length - 1; i++) {
-                        bProtected = bProtected || (row >= agnPatternCenter[i] - 2 && row <= agnPatternCenter[i] + 2 && col >= agnPatternCenter[i] - 2 && col <= agnPatternCenter[i] + 2);
+            for (var i = 0; i < agnPatternCenter.length; i++) {
+                for (var j = 0; j < agnPatternCenter.length; j++) {
+                    var agnX = agnPatternCenter[j];
+                    var agnY = agnPatternCenter[i];
+                    if (agnX === 6 && (agnY === 6 || agnY === edgeCenter)) {
+                        continue;
+                    } else if (agnY === 6 && (agnX === 6 || agnX === edgeCenter)) {
+                        continue;
+                    } else if (agnX !== 6 && agnX !== edgeCenter && agnY !== 6 && agnY !== edgeCenter) {
+                        _oContext.fillStyle = "rgba(0, 0, 0, .2)";
+                        drawAgn(_oContext, agnX, agnY, nWidth, nHeight);
+                    } else {
+                        _oContext.fillStyle = _htOption.colorDark;
+                        drawAgn(_oContext, agnX, agnY, nWidth, nHeight);
                     }
-
-                    var nLeft = col * nWidth + (bProtected ? 0 : (xyOffset * nWidth));
-                    var nTop = row * nHeight + (bProtected ? 0 : (xyOffset * nHeight));
-                    _oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
-                    _oContext.lineWidth = 0.5;
-                    _oContext.fillStyle = bIsDark ? _htOption.colorDark : "rgba(255, 255, 255, 0.6)"; //_htOption.colorLight;
-                    if (agnPatternCenter.length === 0) {
-                        // if align pattern list is empty, then it means that we don't need to leave room for the align patterns
-                        if (!bProtected) _oContext.fillRect(nLeft, nTop, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nWidth, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nHeight);
-                    }else{
-                        var inAgnRange = ((col < nCount - 4 && col >= nCount - 4 - 5 && row < nCount - 4 && row >= nCount - 4 - 5));
-                        if (!bProtected&&!inAgnRange) _oContext.fillRect(nLeft, nTop, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nWidth, (bProtected ? (isBlkPosCtr ? 1 : 1) : dotScale) * nHeight);
-                    }
                 }
@@ -973,2 +1068,3 @@ }
                 _oContext.fillStyle = '#FFFFFF';
+
                 _oContext.fillRect(-margin, -margin, size, margin);
@@ -1014,2 +1110,5 @@ _oContext.fillRect(-margin, viewportSize, size, margin);
 
+            _bContext.drawImage(_tCanvas, 0, 0, size, size);
+            _oContext.drawImage(_bkgCanvas, -margin, -margin, size, size);
+
             if (_htOption.binarize) {
@@ -1107,11 +1206,34 @@ var pixels = _oContext.getImageData(0, 0, size, size);
 
+    function fillRect_(canvas, x, y, w, h, maskSrc) {
+        //console.log("maskSrc=" + maskSrc);
+        if (maskSrc === undefined) {
+            canvas.fillRect(x, y, w, h);
+        } else {
+            canvas.drawImage(maskSrc, x, y, w, h, x, y, w, h);
+        }
+    }
+
+    function fillRect_(canvas, x, y, w, h, maskSrc, bDark) {
+        //console.log("maskSrc=" + maskSrc);
+        if (maskSrc === undefined) {
+            canvas.fillRect(x, y, w, h);
+        } else {
+            canvas.drawImage(maskSrc, x, y, w, h, x, y, w, h);
+            var fill_ = canvas.fillStyle;
+            canvas.fillStyle = bDark ? "rgba(0, 0, 0, .5)" : "rgba(255, 255, 255, .7)";
+            canvas.fillRect(x, y, w, h);
+            canvas.fillStyle = fill_;
+        }
+    }
+
     function drawAgnProtector(context, centerX, centerY, nWidth, nHeight) {
-        context.fillRect((centerX - 2 + 0.5) * nWidth, (centerY - 2 + 0.5) * nHeight, 4 * nWidth, 4 * nHeight);
+        context.clearRect((centerX - 2 ) * nWidth, (centerY - 2 ) * nHeight, 5 * nWidth, 5 * nHeight);
+        context.fillRect((centerX - 2 ) * nWidth, (centerY - 2 ) * nHeight, 5 * nWidth, 5 * nHeight);
     }
 
     function drawAgn(context, centerX, centerY, nWidth, nHeight) {
-        context.fillRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, nWidth, 5 * nHeight);
-        context.fillRect((centerX + 2) * nWidth, (centerY - 2) * nHeight, nWidth, 5 * nHeight);
-        context.fillRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, 5 * nWidth, nHeight);
-        context.fillRect((centerX - 2) * nWidth, (centerY + 2) * nHeight, 5 * nWidth, nHeight);
+        context.fillRect((centerX - 2) * nWidth, (centerY - 2) * nHeight, nWidth, 4 * nHeight);
+        context.fillRect((centerX + 2) * nWidth, (centerY - 2 + 1) * nHeight, nWidth, 4 * nHeight);
+        context.fillRect((centerX - 2 + 1) * nWidth, (centerY - 2) * nHeight, 4 * nWidth, nHeight);
+        context.fillRect((centerX - 2 ) * nWidth, (centerY + 2) * nHeight, 4 * nWidth, nHeight);
         context.fillRect(centerX * nWidth, centerY * nHeight, nWidth, nHeight);
@@ -1171,3 +1293,3 @@ }
             colorLight: "#ffffff",
-            correctLevel: QRErrorCorrectLevel.H,
+            correctLevel: QRErrorCorrectLevel.M,
             backgroundImage: undefined,
@@ -1181,2 +1303,3 @@ backgroundDimming: 'rgba(0,0,0,0)',
             dotScale: 0.35,
+            maskedDots: false,
             autoColor: true,
@@ -1215,3 +1338,4 @@ binarize: false,
     AwesomeQRCode.prototype.makeCode = function (sText) {
-        this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
+        //this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
+        this._oQRCode = new QRCodeModel(-1, this._htOption.correctLevel);
         this._oQRCode.addData(sText);
@@ -1218,0 +1342,0 @@ this._oQRCode.make();

package.json

 {
     "name": "awesome-qr",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "description": "An awesome QR code generator written in JavaScript.",
@@ -5,0 +5,0 @@ "main": "awesome-qr.js",

README.md

@@ -10,6 +10,8 @@ # Awesome-qr.js
 
-### Live demo, 演示网页
+### Live demo 在线演示
 
-Take a look at the [live demo](https://www.bitcat.cc/webapp/awesome-qr/index.html).
+Check out our **brand-new** [live demo](https://www.bitcat.cc/webapp/awesome-qr/index.html).
 
+Or you can also access the live demo by typing ```bitcat.cc/awesome``` in the browser on your smartphone.
+
 ### Compatibility, 兼容性
@@ -31,2 +33,4 @@
 
+##### Simple
+
 Example 1|Example 2|Example 3
@@ -36,2 +40,4 @@ ------------ | ------------- | -------------
 
+##### <del>Magical</del>
+
 Binarized|With a logo|Custom color
@@ -76,2 +82,13 @@ ------------ | ------------- | -------------
 
+```javascript
+var img = new Image();
+img.crossOrigin = "Anonymous";
+img.onload = function() {
+    // Use the img
+};
+img.src = "Some URL";
+```
+
+> Note that the Image loads images asynchronously; that is to say, you will need to set a callback in order to use the image after it has finished loading. For more information, please follow the issue [#8](https://github.com/SumiMakito/Awesome-qr.js/issues/8).
+
 ### Parameters, 参数
@@ -127,4 +144,2 @@
 
-> If you'd like to try out the feature `bindElement`, explore the source code of [this page](https://www.bitcat.cc/webapp/awesome-qr/index2.html).
-
 ### Introducing EFQRCode written in Swift
@@ -149,2 +164,7 @@
 ### Would you like to buy me a cup of cappuccino? 要请我喝一杯卡布奇诺吗？
+
+If you really like Awesome-qr.js, please consider making a donation to support me. Thanks!
+
+Search **"sumimakito"** on Alipay, or click the links below.
+
 PayPal | Alipay
@@ -154,4 +174,12 @@ ----|----
 
+Also, you can try to scan the following QR code with Alipay.
+
+<img src="https://raw.githubusercontent.com/SumiMakito/Misc/master/alipay.png" width="300">
+
 ### Changelog 更新日志
 
+##### Ver. 1.0.10
+
+- Fixed a bug in the core library which would cause the too-early overflow.
+
 ##### Ver. 1.0.9
@@ -158,0 +186,0 @@

No alert changes

Improved metrics

Total package byte prevSize

6860591

increased by9.66%

Number of package files

15

increased by15.38%

Lines of code

1305

increased by9.39%

Number of lines in readme file

277

increased by11.24%

No dependency changes