Image Barcode Filter Effect Generator

function processImage(originalImg, stripeWidth = 10, orientation = "vertical", threshold = 128, darkColor = "black", lightColor = "white") {
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Prepare output canvas. This will be returned even in some error cases, with an error message drawn on it.
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = imgWidth;
    outputCanvas.height = imgHeight;
    const ctx = outputCanvas.getContext('2d');

    // Fallback for the rare case that canvas context cannot be obtained for the output canvas
    if (!ctx) {
        console.error("Failed to get 2D context for output canvas.");
        const p = document.createElement('p');
        p.textContent = "Error: Canvas 2D context is not supported or failed to initialize.";
        // Style for visibility
        p.style.color = "red";
        p.style.padding = "10px";
        p.style.border = "1px solid red";
        return p;
    }
    
    // Helper function to draw error messages on the output canvas
    function drawError(message) {
        ctx.clearRect(0, 0, imgWidth, imgHeight); // Clear previous content
        ctx.fillStyle = 'lightgray';
        ctx.fillRect(0, 0, imgWidth, imgHeight);
        
        ctx.font = '16px Arial';
        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const lines = [];
        const maxWidth = imgWidth * 0.9 > 0 ? imgWidth * 0.9 : 100; // ensure maxWidth is positive
        let currentLine = '';
        const words = message.split(' ');

        for (const word of words) {
            const testLine = currentLine + word + ' ';
            if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
                lines.push(currentLine.trim());
                currentLine = word + ' ';
            } else {
                currentLine = testLine;
            }
        }
        lines.push(currentLine.trim());

        const lineHeight = 20;
        const startY = imgHeight / 2 - (lines.length - 1) * lineHeight / 2;

        lines.forEach((line, index) => {
            ctx.fillText(line, imgWidth / 2, startY + index * lineHeight);
        });
    }

    // --- Parameter Sanitization ---
    let sw = parseInt(String(stripeWidth), 10);
    if (isNaN(sw) || sw <= 0) {
        sw = 10; // Default stripe width if invalid
    }

    let or = String(orientation).toLowerCase();
    if (or !== "horizontal") {
        or = "vertical"; // Default orientation
    }

    let th = parseInt(String(threshold), 10);
    if (isNaN(th)) {
        th = 128; // Default threshold
    }
    th = Math.max(0, Math.min(255, th)); // Clamp threshold to 0-255 range

    // Ensure colors are valid, non-empty strings; otherwise, use defaults.
    // typeof null is 'object', so `darkColor === null` would make `typeof darkColor === 'string'` false.
    // An empty string `""` or string with only spaces `"   "` should also fall back to default.
    let dc = (typeof darkColor === 'string' && darkColor.trim()) ? darkColor.trim() : "black";
    let lc = (typeof lightColor === 'string' && lightColor.trim()) ? lightColor.trim() : "white";

    // Handle cases where image might not have dimensions (e.g. not loaded, though problem implies it is)
    if (imgWidth === 0 || imgHeight === 0) {
        drawError("Error: Image has zero width or height.");
        return outputCanvas;
    }

    // --- Image Data Acquisition ---
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = imgWidth;
    tempCanvas.height = imgHeight;
    const tempCtx = tempCanvas.getContext('2d');

    if (!tempCtx) {
        drawError("Error: Could not create temporary canvas context for image processing.");
        return outputCanvas;
    }
    
    tempCtx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    
    let imageData;
    try {
        imageData = tempCtx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting image data:", e);
        drawError("Error: Could not access image pixel data. This can happen with cross-origin images if the server doesn't allow it (CORS policy).");
        return outputCanvas;
    }
    const data = imageData.data;

    // --- Main Barcode Effect Logic ---
    if (or === "vertical") {
        for (let x = 0; x < imgWidth; x += sw) {
            const currentStripeWidth = Math.min(sw, imgWidth - x);
            let sumBrightness = 0;
            const numPixelsInStripe = currentStripeWidth * imgHeight;

            if (numPixelsInStripe === 0) continue; // Avoid division by zero if stripe is 0px area

            for (let i = 0; i < currentStripeWidth; i++) { // Iterate columns within the stripe
                const currentX = x + i;
                for (let currentY = 0; currentY < imgHeight; currentY++) { // Iterate rows for this column
                    const pixelStartIndex = (currentY * imgWidth + currentX) * 4;
                    const r = data[pixelStartIndex];
                    const g = data[pixelStartIndex + 1];
                    const b = data[pixelStartIndex + 2];
                    // Luminance calculation (standard)
                    const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                    sumBrightness += brightness;
                }
            }
            
            const avgBrightness = sumBrightness / numPixelsInStripe;
            ctx.fillStyle = (avgBrightness < th) ? dc : lc;
            ctx.fillRect(x, 0, currentStripeWidth, imgHeight);
        }
    } else { // Horizontal stripes
        for (let y = 0; y < imgHeight; y += sw) {
            const currentStripeHeight = Math.min(sw, imgHeight - y);
            let sumBrightness = 0;
            const numPixelsInStripe = imgWidth * currentStripeHeight;

            if (numPixelsInStripe === 0) continue;

            for (let i = 0; i < currentStripeHeight; i++) { // Iterate rows within the stripe
                const currentY = y + i;
                for (let currentX = 0; currentX < imgWidth; currentX++) { // Iterate columns for this row
                    const pixelStartIndex = (currentY * imgWidth + currentX) * 4;
                    const r = data[pixelStartIndex];
                    const g = data[pixelStartIndex + 1];
                    const b = data[pixelStartIndex + 2];
                    const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                    sumBrightness += brightness;
                }
            }

            const avgBrightness = sumBrightness / numPixelsInStripe;
            ctx.fillStyle = (avgBrightness < th) ? dc : lc;
            ctx.fillRect(0, y, imgWidth, currentStripeHeight);
        }
    }

    return outputCanvas;
}