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);
  }
 
  /**