Merge branch 'master' of https://github.com/mebjas/html5-qrcode

changelog.md

@@ -1,3 +1,9 @@
+### Version 2.3.1
+-   Improved support for UPC types - by [Breno1288](https://github.com/Breno1288), forked from PR - [pull#501](https://github.com/mebjas/html5-qrcode/pull/501)
+-   Fix form submission in Firefox issue - [Discussion#413](https://github.com/mebjas/html5-qrcode/discussions/413#discussioncomment-2124480) by [Joggel72](https://github.com/Joggel72), forked from PR - [pull#431](https://github.com/mebjas/html5-qrcode/pull/431)
+-   Fix support for UPC-E as called out in several bugs - [parent issue#605](https://github.com/mebjas/html5-qrcode/issues/605)
+-   Add `willReadFrequently` attribute to canvas context for camera scan as per Google Chrome recommendation.
+
 ### Version 2.3.0
 
 -    Added support for drag and drop of image in file based scanner.

src/html5-qrcode.ts

@@ -1174,11 +1174,17 @@ export class Html5Qrcode {
 
         const canvasElement = this.createCanvasElement(
             qrRegion.width, qrRegion.height);
+        // Tell user agent that this canvas will be read frequently.
+        // More info:
+        // https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently
+        const contextAttributes: any = { willReadFrequently: true };
+        // Casting canvas to any, as Microsoft's interface definition hasn't
+        // caught up with latest definition for 'CanvasRenderingContext2DSettings'.
         const context: CanvasRenderingContext2D
-             = canvasElement.getContext("2d")!;
+            = (<any>canvasElement).getContext("2d", contextAttributes)!;
         context.canvas.width = qrRegion.width;
         context.canvas.height = qrRegion.height;
- 
+
         // Insert the canvas
         this.element!.append(canvasElement);
         if (shouldShadingBeApplied) {

src/ui/scanner/base.ts

@@ -70,6 +70,9 @@ export class BaseUiElementFactory {
         let element: Type = <Type>(document.createElement(elementType));
         element.id = elementId;
         element.classList.add(PublicUiElementIdAndClasses.ALL_ELEMENT_CLASS);
+        if (elementType === "button") {
+            element.setAttribute("type", "button");
+        }
         return element;
     }
 }

src/zxing-html5-qrcode-decoder.ts

@@ -75,6 +75,8 @@ export class ZXingHtml5QrcodeDecoder implements QrcodeDecoderAsync {
         const formats = this.createZXingFormats(requestedFormats);
         const hints = new Map();
         hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, formats);
+        // TODO(minhazav): Make this configurable by developers.
+        hints.set(ZXing.DecodeHintType.TRY_HARDER, false);
         this.hints = hints;
     }
 

tests/ui/scanner/base.test.ts

@@ -22,16 +22,32 @@ describe("BaseUiElementFactory#createElement()", () => {
     it("Creates element with expected ID", () => {
         const expectedId = "test-id";
         let button = BaseUiElementFactory.createElement<HTMLButtonElement>(
-            "select", expectedId);
+            "button", expectedId);
         expect(button.id).eq(expectedId);
     });
 
     it("Creates element with common class", () => {
         let button = BaseUiElementFactory.createElement<HTMLButtonElement>(
-            "select", "test-id");
+            "button", "test-id");
         let hasClass = button.classList.contains(
             PublicUiElementIdAndClasses.ALL_ELEMENT_CLASS);
 
         expect(hasClass).to.be.true;
     });
+
+    it("Creates button element with button type attribute", () => {
+        let button = BaseUiElementFactory.createElement<HTMLButtonElement>(
+            "button", "test-id");
+        let typeAttributeValue = button.getAttribute("type");
+
+        expect(typeAttributeValue).eq("button");
+    });
+
+    it("Creates select element without type attribute", () => {
+        let select = BaseUiElementFactory.createElement<HTMLSelectElement>(
+            "select", "test-id");
+        let typeAttributeValue = select.getAttribute("type");
+
+        expect(typeAttributeValue).to.be.null;
+    });
 });

third_party/zxing-js.umd.d.ts

@@ -18,7 +18,8 @@ declare class MultiFormatReader {
 }
 
 export declare enum DecodeHintType {
-    POSSIBLE_FORMATS = 2
+    POSSIBLE_FORMATS = 2,
+    TRY_HARDER = 3
 }
 
 export declare enum BarcodeFormat {