Image Solar Panel Filter Effect Tool

function processImage(originalImg, gridSize = 30, gridColor = 'rgba(0, 0, 0, 0.3)', gridLineWidth = 1, redFactor = 0.3, greenFactor = 0.5, blueChannelFactor = 0.8, blueBoost = 50) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use natural dimensions of the image to ensure we are working with the original resolution
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get image data if possible (might fail due to CORS for cross-origin images)
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting imageData for processing: ", e);
        // If we can't get image data, we can't apply the pixel-level filter.
        // We'll return the canvas with the original image drawn.
        // The grid (if enabled) can still be drawn on top.
    }

    if (imageData) {
        const data = imageData.data;

        // Apply color filter to simulate solar panel appearance
        for (let i = 0; i < data.length; i += 4) {
            // Reduce red and green components
            data[i] = Math.max(0, Math.min(255, data[i] * redFactor));           // Red
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] * greenFactor));   // Green
            
            // Adjust blue component: scale existing blue and add a boost
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] * blueChannelFactor + blueBoost)); // Blue
            
            // Alpha channel (data[i + 3]) remains unchanged
        }

        // Put the modified data back onto the canvas
        ctx.putImageData(imageData, 0, 0);
    } else {
        // If imageData could not be retrieved, we draw the original image again
        // This ensures the canvas is not blank if pixel processing failed.
        // The grid will be drawn over this original image.
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        console.warn("Pixel processing skipped due to an issue retrieving imageData. Drawing grid over original image.");
    }

    // Draw grid lines if gridSize and gridLineWidth are positive
    if (gridSize > 0 && gridLineWidth > 0 && imgWidth > 0 && imgHeight > 0) {
        ctx.strokeStyle = gridColor;
        ctx.lineWidth = gridLineWidth;

        // Offset for sharper lines if lineWidth is odd (e.g., 1px)
        const offset = (gridLineWidth % 2 === 1) ? 0.5 : 0;

        // Vertical lines
        for (let x = gridSize; x < imgWidth; x += gridSize) {
            ctx.beginPath();
            ctx.moveTo(x + offset, 0);
            ctx.lineTo(x + offset, imgHeight);
            ctx.stroke();
        }

        // Horizontal lines
        for (let y = gridSize; y < imgHeight; y += gridSize) {
            ctx.beginPath();
            ctx.moveTo(0, y + offset);
            ctx.lineTo(imgWidth, y + offset);
            ctx.stroke();
        }
    }

    return canvas;
}