javascript-barcode-qr-code-scanner icon indicating copy to clipboard operation
javascript-barcode-qr-code-scanner copied to clipboard

Scan Guide Border Not Showing & Auto-Crop Not Working

Open rama-can opened this issue 4 months ago • 1 comments

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

  1. When camera view is active, a scan guide border/frame should appear to help users align the MRZ document
  2. The originalImageResult should contain auto-cropped image of the detected MRZ region

Actual Behavior

  1. Camera view shows no scan guide border/frame despite showScanGuide: true
  2. originalImageResult contains 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

  1. Is showScanGuide expected to show a visual guide/border in the camera view? If yes, are there additional CSS/UI files required?
  2. Does enableMultiFrameCrossFilter: true automatically crop originalImageResult to the detected MRZ region? Or do I need to manually crop using the detection coordinates?
  3. Is resultViewConfig required even when showResultView: false? Currently getting "MRZResultView container is required" error if I include it.

Additional Context

  • Camera and MRZ detection work correctly
  • res.originalImageResult contains .toCanvas(), .toBlob(), .bytes, .width, .height properties
  • No console errors related to UI/CSS loading

Steps to Reproduce

  1. Initialize scanner with config above
  2. Call await mrzscanner.launch()
  3. Camera view appears without scan guide border
  4. Scan passport/ID successfully
  5. 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!

rama-can avatar Nov 26 '25 08:11 rama-can