javascript-barcode-qr-code-scanner
javascript-barcode-qr-code-scanner copied to clipboard
Scan Guide Border Not Showing & Auto-Crop Not Working
Environment
- Library: dynamsoft-mrz-scanner v3.0.0 (CDN: https://cdn.jsdelivr.net/npm/[email protected]/dist/mrz-scanner.bundle.js)
- Browser: [Chrome]
- Platform: [macOS]
Expected Behavior
- When camera view is active, a scan guide border/frame should appear to help users align the MRZ document
- The
originalImageResultshould contain auto-cropped image of the detected MRZ region
Actual Behavior
- Camera view shows no scan guide border/frame despite
showScanGuide: true -
originalImageResultcontains the full image without auto-cropping to MRZ area
Configuration
const scanner = await new Dynamsoft.MRZScanner({
license: "{{ LICENSE_KEY }}",
mrzFormatType: ["passport", "td1", "td2", "td3"],
showResultView: false,
scannerViewConfig: {
container: document.getElementById("scanner-container"),
showCloseButton: true,
showUploadImage: false,
showFormatSelector: true,
showSoundToggle: false,
showPoweredByDynamsoft: false,
showScanGuide: true,
},
onError: (error) => {
console.error(error);
}
});
Questions
-
Is
showScanGuideexpected to show a visual guide/border in the camera view? If yes, are there additional CSS/UI files required? -
Does
enableMultiFrameCrossFilter: trueautomatically croporiginalImageResultto the detected MRZ region? Or do I need to manually crop using the detection coordinates? -
Is
resultViewConfigrequired even whenshowResultView: false? Currently getting "MRZResultView container is required" error if I include it.
Additional Context
- Camera and MRZ detection work correctly
-
res.originalImageResultcontains.toCanvas(),.toBlob(),.bytes,.width,.heightproperties - No console errors related to UI/CSS loading
Steps to Reproduce
- Initialize scanner with config above
- Call
await mrzscanner.launch() - Camera view appears without scan guide border
- Scan passport/ID successfully
-
originalImageResult.toCanvas()returns full camera frame, not cropped to MRZ
Request
Could you provide:
- Correct configuration for showing scan guide border
- How to obtain auto-cropped MRZ region from result
- Any missing dependencies or CSS requirements
Thank you!