Skip to content

Instantly share code, notes, and snippets.

@ajaxsys
Created September 5, 2018 07:16
Show Gist options
  • Save ajaxsys/cf18c534e1455c737278c74770edc9be to your computer and use it in GitHub Desktop.
Save ajaxsys/cf18c534e1455c737278c74770edc9be to your computer and use it in GitHub Desktop.
Patch for ngx scanner, only center areas are valid for scanning.
// Patch for node_modules/@zxing/ngx-scanner/esm5/zxing-ngx-scanner.js
BrowserCodeReader.prototype.createBinaryBitmap = function (mediaElement) {
if (undefined === this.canvasElementContext) {
this.prepareCaptureCanvas();
}
this.canvasElementContext.drawImage(mediaElement, 0, 0);
// FIXME byHo
// var luminanceSource = new HTMLCanvasElementLuminanceSource(this.canvasElement);
// var hybridBinarizer = new HybridBinarizer(luminanceSource);
// return new BinaryBitmap(hybridBinarizer);
const allWidth = this.canvasElement.width;
const allHeight = this.canvasElement.height;
const left = allWidth/4;
const top = Math.min(allWidth, allHeight)/4;
const squareSize = Math.min(allWidth, allHeight) / 2;
// const crop = all.crop(left, top, squareSize, squareSize);
var canvas1 = document.createElement("canvas");
canvas1.width = squareSize;
canvas1.height = squareSize;
var ctx1 = canvas1.getContext("2d");
ctx1.rect(0, 0, squareSize, squareSize);
ctx1.fillStyle = 'white';
ctx1.fill();
// ctx1.putImageData(crop.binarizer.source, 0, 0);
ctx1.putImageData(
this.canvasElementContext.getImageData(left, top, squareSize, squareSize),
0, 0);
$('.dstImg').attr('src', canvas1.toDataURL("image/png"));
// $('.dstImg').each((i, img) =>
// this.canvasElementContext.drawImage(img, left, top, squareSize, squareSize, 0, 0, squareSize, squareSize));
var luminanceSource = new HTMLCanvasElementLuminanceSource(canvas1);
var hybridBinarizer = new HybridBinarizer(luminanceSource);
// hybridBinarizer.source.buffer = crop.binarizer.source;
// hybridBinarizer.source.width = squareSize;
// hybridBinarizer.source.height = squareSize;
return new BinaryBitmap(hybridBinarizer);
};
@zhanglongchina
Copy link

请问这个怎么使用,把你的这段代码拷贝到 node_modules/@zxing/ngx-scanner/esm5/zxing-ngx-scanner.js 里面吗?
效果是会在全屏相机区域中选定一部分区域吗, 就像微信扫码那样?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment