Merge pull request #448 from conorWebco/canvas-dimensions

explicit parameters for canvasElementContext.drawImage
zxing-js · Oct 26, 2021 · 0dafe7f · 0dafe7f
2 parents 526eb39 + b4774b2
commit 0dafe7f
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/src/browser/BrowserCodeReader.ts b/src/browser/BrowserCodeReader.ts
@@ -838,6 +838,11 @@ export class BrowserCodeReader {
     return this.decodeBitmap(binaryBitmap);
   }
 
+  private _isHTMLVideoElement(mediaElement: HTMLVisualMediaElement):boolean {
+    const potentialVideo: HTMLVideoElement = <HTMLVideoElement>mediaElement;
+    return potentialVideo.videoWidth !== 0;
+  }
+
   /**
    * Creates a binaryBitmap based in some image source.
    *
@@ -846,9 +851,11 @@ export class BrowserCodeReader {
   public createBinaryBitmap(mediaElement: HTMLVisualMediaElement): BinaryBitmap {
 
     const ctx = this.getCaptureCanvasContext(mediaElement);
-
-    this.drawImageOnCanvas(ctx, mediaElement);
-
+    if(this._isHTMLVideoElement(mediaElement)) {
+      this.drawFrameOnCanvas(<HTMLVideoElement>mediaElement);
+    } else {
+      this.drawImageOnCanvas(<HTMLImageElement>mediaElement);
+    }
     const canvas = this.getCaptureCanvas(mediaElement);
 
     const luminanceSource = new HTMLCanvasElementLuminanceSource(canvas);
@@ -884,11 +891,18 @@ export class BrowserCodeReader {
     return this.captureCanvas;
   }
 
+ /**
+   * Overwriting this allows you to manipulate the next frame in anyway you want before decode.
+   */
+  public drawFrameOnCanvas(srcElement: HTMLVideoElement, dimensions = {sx: 0, sy: 0, sWidth: srcElement.videoWidth, sHeight: srcElement.videoHeight, dx: 0, dy: 0, dWidth: srcElement.videoWidth, dHeight: srcElement.videoHeight}, canvasElementContext = this.captureCanvasContext) {
+    canvasElementContext.drawImage(srcElement, dimensions.sx, dimensions.sy, dimensions.sWidth, dimensions.sHeight, dimensions.dx, dimensions.dy, dimensions.dWidth, dimensions.dHeight);
+  }
+
   /**
    * Ovewriting this allows you to manipulate the snapshot image in anyway you want before decode.
    */
-  public drawImageOnCanvas(canvasElementContext: CanvasRenderingContext2D, srcElement: HTMLVisualMediaElement) {
-    canvasElementContext.drawImage(srcElement, 0, 0);
+  public drawImageOnCanvas(srcElement: HTMLImageElement, dimensions = {sx: 0, sy: 0, sWidth: srcElement.naturalWidth, sHeight: srcElement.naturalHeight, dx: 0, dy: 0, dWidth: srcElement.naturalWidth, dHeight: srcElement.naturalHeight}, canvasElementContext = this.captureCanvasContext) {
+    canvasElementContext.drawImage(srcElement, dimensions.sx, dimensions.sy, dimensions.sWidth, dimensions.sHeight, dimensions.dx, dimensions.dy, dimensions.dWidth, dimensions.dHeight);
   }
 
   /**