From c103ed1cac4b92e5f5de33c8d01e57f780e9ff2d Mon Sep 17 00:00:00 2001 From: David Werth Date: Tue, 20 Aug 2024 15:44:12 +0200 Subject: [PATCH] #527 Unable to scan PDF_417 codes --- src/browser/BrowserCodeReader.ts | 7 +- .../HTMLCanvasElementLuminanceSource.ts | 121 +++++++++--------- 2 files changed, 64 insertions(+), 64 deletions(-) diff --git a/src/browser/BrowserCodeReader.ts b/src/browser/BrowserCodeReader.ts index d9b495ba..b96c7469 100644 --- a/src/browser/BrowserCodeReader.ts +++ b/src/browser/BrowserCodeReader.ts @@ -934,14 +934,17 @@ export class BrowserCodeReader { mediaElement: HTMLVisualMediaElement ): BinaryBitmap { const ctx = this.getCaptureCanvasContext(mediaElement); - if(mediaElement instanceof HTMLVideoElement) { + // doing a scan with inverted colors on the second scan should only happen for video elements + let doAutoInvert = false; + if (mediaElement instanceof HTMLVideoElement) { this.drawFrameOnCanvas(mediaElement); + doAutoInvert = true; } else { this.drawImageOnCanvas(mediaElement); } const canvas = this.getCaptureCanvas(mediaElement); - const luminanceSource = new HTMLCanvasElementLuminanceSource(canvas); + const luminanceSource = new HTMLCanvasElementLuminanceSource(canvas, doAutoInvert); const hybridBinarizer = new HybridBinarizer(luminanceSource); return new BinaryBitmap(hybridBinarizer); diff --git a/src/browser/HTMLCanvasElementLuminanceSource.ts b/src/browser/HTMLCanvasElementLuminanceSource.ts index 99c6f45b..4695ae2c 100644 --- a/src/browser/HTMLCanvasElementLuminanceSource.ts +++ b/src/browser/HTMLCanvasElementLuminanceSource.ts @@ -10,74 +10,71 @@ export class HTMLCanvasElementLuminanceSource extends LuminanceSource { private buffer: Uint8ClampedArray; private static DEGREE_TO_RADIANS = Math.PI / 180; - private static FRAME_INDEX = true; + private static FRAME_INDEX = true; private tempCanvasElement: HTMLCanvasElement = null; - public constructor(private canvas: HTMLCanvasElement) { - super(canvas.width, canvas.height); - this.buffer = HTMLCanvasElementLuminanceSource.makeBufferFromCanvasImageData(canvas); + public constructor(private canvas: HTMLCanvasElement, doAutoInvert: boolean = false) { + super(canvas.width, canvas.height); + this.buffer = HTMLCanvasElementLuminanceSource.makeBufferFromCanvasImageData(canvas, doAutoInvert); } - private static makeBufferFromCanvasImageData(canvas: HTMLCanvasElement): Uint8ClampedArray { - const imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height); - return HTMLCanvasElementLuminanceSource.toGrayscaleBuffer(imageData.data, canvas.width, canvas.height); + private static makeBufferFromCanvasImageData(canvas: HTMLCanvasElement, doAutoInvert: boolean = false): Uint8ClampedArray { + const imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height); + return HTMLCanvasElementLuminanceSource.toGrayscaleBuffer(imageData.data, canvas.width, canvas.height, doAutoInvert); } - private static toGrayscaleBuffer(imageBuffer: Uint8ClampedArray, width: number, height: number): Uint8ClampedArray { - const grayscaleBuffer = new Uint8ClampedArray(width * height); - HTMLCanvasElementLuminanceSource.FRAME_INDEX = !HTMLCanvasElementLuminanceSource.FRAME_INDEX; - if(HTMLCanvasElementLuminanceSource.FRAME_INDEX) - { - for (let i = 0, j = 0, length = imageBuffer.length; i < length; i += 4, j++) { - let gray; - const alpha = imageBuffer[i + 3]; - // The color of fully-transparent pixels is irrelevant. They are often, technically, fully-transparent - // black (0 alpha, and then 0 RGB). They are often used, of course as the "white" area in a - // barcode image. Force any such pixel to be white: - if (alpha === 0) { - gray = 0xFF; - } else { - const pixelR = imageBuffer[i]; - const pixelG = imageBuffer[i + 1]; - const pixelB = imageBuffer[i + 2]; - // .299R + 0.587G + 0.114B (YUV/YIQ for PAL and NTSC), - // (306*R) >> 10 is approximately equal to R*0.299, and so on. - // 0x200 >> 10 is 0.5, it implements rounding. - gray = (306 * pixelR + - 601 * pixelG + - 117 * pixelB + - 0x200) >> 10; - } - grayscaleBuffer[j] = gray; - } - } - else - { - for (let i = 0, j = 0, length = imageBuffer.length; i < length; i += 4, j++) { - let gray; - const alpha = imageBuffer[i + 3]; - // The color of fully-transparent pixels is irrelevant. They are often, technically, fully-transparent - // black (0 alpha, and then 0 RGB). They are often used, of course as the "white" area in a - // barcode image. Force any such pixel to be white: - if (alpha === 0) { - gray = 0xFF; - } else { - const pixelR = imageBuffer[i]; - const pixelG = imageBuffer[i + 1]; - const pixelB = imageBuffer[i + 2]; - // .299R + 0.587G + 0.114B (YUV/YIQ for PAL and NTSC), - // (306*R) >> 10 is approximately equal to R*0.299, and so on. - // 0x200 >> 10 is 0.5, it implements rounding. - gray = (306 * pixelR + - 601 * pixelG + - 117 * pixelB + - 0x200) >> 10; - } - grayscaleBuffer[j] = 0xFF - gray; - } - } - return grayscaleBuffer; + private static toGrayscaleBuffer(imageBuffer: Uint8ClampedArray, width: number, height: number, doAutoInvert: boolean = false): Uint8ClampedArray { + const grayscaleBuffer = new Uint8ClampedArray(width * height); + HTMLCanvasElementLuminanceSource.FRAME_INDEX = !HTMLCanvasElementLuminanceSource.FRAME_INDEX; + if (HTMLCanvasElementLuminanceSource.FRAME_INDEX || !doAutoInvert) { + for (let i = 0, j = 0, length = imageBuffer.length; i < length; i += 4, j++) { + let gray; + const alpha = imageBuffer[i + 3]; + // The color of fully-transparent pixels is irrelevant. They are often, technically, fully-transparent + // black (0 alpha, and then 0 RGB). They are often used, of course as the "white" area in a + // barcode image. Force any such pixel to be white: + if (alpha === 0) { + gray = 0xFF; + } else { + const pixelR = imageBuffer[i]; + const pixelG = imageBuffer[i + 1]; + const pixelB = imageBuffer[i + 2]; + // .299R + 0.587G + 0.114B (YUV/YIQ for PAL and NTSC), + // (306*R) >> 10 is approximately equal to R*0.299, and so on. + // 0x200 >> 10 is 0.5, it implements rounding. + gray = (306 * pixelR + + 601 * pixelG + + 117 * pixelB + + 0x200) >> 10; + } + grayscaleBuffer[j] = gray; + } + } else { + for (let i = 0, j = 0, length = imageBuffer.length; i < length; i += 4, j++) { + let gray; + const alpha = imageBuffer[i + 3]; + // The color of fully-transparent pixels is irrelevant. They are often, technically, fully-transparent + // black (0 alpha, and then 0 RGB). They are often used, of course as the "white" area in a + // barcode image. Force any such pixel to be white: + if (alpha === 0) { + gray = 0xFF; + } else { + const pixelR = imageBuffer[i]; + const pixelG = imageBuffer[i + 1]; + const pixelB = imageBuffer[i + 2]; + // .299R + 0.587G + 0.114B (YUV/YIQ for PAL and NTSC), + // (306*R) >> 10 is approximately equal to R*0.299, and so on. + // 0x200 >> 10 is 0.5, it implements rounding. + gray = (306 * pixelR + + 601 * pixelG + + 117 * pixelB + + 0x200) >> 10; + } + grayscaleBuffer[j] = 0xFF - gray; + } + } + return grayscaleBuffer; } public getRow(y: number /*int*/, row: Uint8ClampedArray): Uint8ClampedArray { @@ -167,4 +164,4 @@ export class HTMLCanvasElementLuminanceSource extends LuminanceSource { public invert(): LuminanceSource { return new InvertedLuminanceSource(this); } -} \ No newline at end of file +}