From Blurry to Crystal Clear: Image Quality Best Practices for Check Capture

const imageRequirements = {
  resolution: {
    minimum: "1280x720", // 720p minimum
    recommended: "1920x1080", // 1080p for optimal OCR
    dpi: 150 // minimum for text recognition
  },
  
  quality: {
    compression: "minimal", // JPEG quality 85%+
    colorDepth: "24-bit", // full color for better contrast
    format: "JPEG" // with minimal compression
  },
  
  lighting: {
    brightness: "adequate", // avoid over/under exposure
    contrast: "high", // clear text distinction
    evenness: "uniform" // avoid harsh shadows
  }
};

class ImageQualityAssessment {
    
    // Check image sharpness using Laplacian variance
    calculateSharpness(imageData) {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // Convert to grayscale and apply Laplacian filter
        const variance = this.laplacianVariance(imageData);
        
        return {
            score: variance,
            isSharp: variance > 100, // Threshold for acceptable sharpness
            recommendation: variance < 50 ? "Hold camera steady" : 
                          variance < 100 ? "Focus on check" : "Good"
        };
    }
    
    // Assess lighting conditions
    evaluateLighting(imageData) {
        const histogram = this.calculateHistogram(imageData);
        const brightness = this.calculateBrightness(histogram);
        const contrast = this.calculateContrast(histogram);
        
        return {
            brightness: brightness,
            contrast: contrast,
            isAdequate: brightness > 50 && brightness < 200 && contrast > 30,
            recommendation: this.getLightingRecommendation(brightness, contrast)
        };
    }
    
    // Check for proper check framing
    validateFraming(corners) {
        const area = this.calculatePolygonArea(corners);
        const aspectRatio = this.calculateAspectRatio(corners);
        const skew = this.calculateSkewAngle(corners);
        
        return {
            area: area,
            aspectRatio: aspectRatio,
            skewAngle: skew,
            isProperlyFramed: area > 0.3 && 
                            Math.abs(aspectRatio - 2.4) < 0.3 && 
                            Math.abs(skew) < 15,
            recommendation: this.getFramingRecommendation(area, aspectRatio, skew)
        };
    }
}

class CaptureGuidance {
    
    constructor() {
        this.qualityAssessment = new ImageQualityAssessment();
        this.feedbackElement = document.getElementById('capture-feedback');
    }
    
    // Real-time analysis during preview
    analyzePreviewFrame(videoFrame) {
        const quality = this.qualityAssessment.analyzeFrame(videoFrame);
        this.updateUserFeedback(quality);
        this.updateCaptureButton(quality.readyToCapture);
    }
    
    updateUserFeedback(quality) {
        const messages = [];
        
        if (!quality.lighting.isAdequate) {
            messages.push({
                type: 'warning',
                text: quality.lighting.recommendation,
                icon: '💡'
            });
        }
        
        if (!quality.sharpness.isSharp) {
            messages.push({
                type: 'warning',
                text: quality.sharpness.recommendation,
                icon: '📱'
            });
        }
        
        if (!quality.framing.isProperlyFramed) {
            messages.push({
                type: 'warning',
                text: quality.framing.recommendation,
                icon: '🎯'
            });
        }
        
        if (quality.readyToCapture) {
            messages.push({
                type: 'success',
                text: 'Hold steady...',
                icon: '✅'
            });
        }
        
        this.displayFeedback(messages);
    }
}

class LightingOptimization {
    
    async optimizeLighting(stream) {
        const track = stream.getVideoTracks()[0];
        const capabilities = track.getCapabilities();
        
        if (capabilities.torch) {
            // Use torch for consistent lighting
            await track.applyConstraints({
                advanced: [{ torch: true }]
            });
        }
        
        // Adjust camera settings for document capture
        if (capabilities.exposureCompensation) {
            await track.applyConstraints({
                exposureCompensation: 1.0 // Slight overexposure for docs
            });
        }
    }
    
    // Detect low light conditions
    detectLowLight(imageData) {
        const avgBrightness = this.calculateAverageBrightness(imageData);
        return avgBrightness < 80; // Threshold for low light
    }
}

class OptimizedImageCapture {
    
    constructor() {
        this.processingQueue = [];
        this.isProcessing = false;
    }
    
    // Optimize image capture for performance
    async captureOptimizedImage() {
        // Capture at optimal resolution
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // Set canvas to optimal size for OCR
        canvas.width = 1600;  // Width optimized for check aspect ratio
        canvas.height = 667;  // Maintains 2.4:1 aspect ratio
        
        // Draw video frame to canvas with optimization
        ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
        
        // Apply client-side preprocessing
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const processed = await this.preprocessImage(imageData);
        
        return canvas.toDataURL('image/jpeg', 0.9); // High quality JPEG
    }
    
    // Asynchronous preprocessing to avoid blocking UI
    async preprocessImage(imageData) {
        return new Promise((resolve) => {
            // Use Web Workers for heavy processing
            const worker = new Worker('image-processor.js');
            worker.postMessage({ imageData });
            
            worker.onmessage = (e) => {
                resolve(e.data.processedImage);
                worker.terminate();
            };
        });
    }
}

class QualityMetrics {
    
    trackCaptureAttempt(imageQuality, ocrResult) {
        const metrics = {
            timestamp: Date.now(),
            
            // Image quality scores
            sharpness: imageQuality.sharpness.score,
            brightness: imageQuality.lighting.brightness,
            contrast: imageQuality.lighting.contrast,
            
            // OCR success metrics
            ocrConfidence: ocrResult.confidence,
            fieldsExtracted: ocrResult.extractedFields.length,
            manualReviewRequired: ocrResult.confidence < 0.8,
            
            // User experience metrics
            attemptNumber: this.getCurrentAttemptNumber(),
            timeToCapture: this.getTimeToCapture(),
            
            // Device context
            deviceModel: navigator.userAgent,
            lightingCondition: this.classifyLighting(imageQuality.lighting)
        };
        
        this.sendMetrics(metrics);
    }
    
    generateQualityReport() {
        return {
            successRate: this.calculateSuccessRate(),
            averageQuality: this.calculateAverageQuality(),
            commonIssues: this.identifyCommonIssues(),
            recommendations: this.generateRecommendations()
        };
    }
}