Image Background Remover And Shadow Adder For Furniture Products

/**
 * Removes the background from a product image and adds a configurable shadow.
 * This function is ideal for creating professional-looking product shots, especially for furniture.
 * It uses the @imgly/background-removal library, which is loaded dynamically from a CDN.
 *
 * @param {HTMLImageElement} originalImg The original image element of the product.
 * @param {number} [shadowOffsetX=10] The horizontal offset of the shadow in pixels.
 * @param {number} [shadowOffsetY=20] The vertical offset of the shadow in pixels.
 * @param {number} [shadowBlur=30] The blur radius of the shadow in pixels.
 * @param {string} [shadowColor='rgba(0, 0, 0, 0.5)'] The color of the shadow.
 * @returns {Promise<HTMLCanvasElement|HTMLDivElement>} A Promise that resolves to a canvas element with the processed image, or a div element containing an error message if processing fails.
 */
async function processImage(originalImg, shadowOffsetX = 10, shadowOffsetY = 20, shadowBlur = 30, shadowColor = 'rgba(0, 0, 0, 0.5)') {

    /**
     * Creates a container div with the original image on a canvas and a visible error message.
     * This is used as a fallback return value when processing fails.
     * @param {HTMLImageElement} img The image to display.
     * @param {string} message The error message to show.
     * @returns {HTMLDivElement} A div element containing the image and the error message.
     */
    const createErrorResult = (img, message) => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);

        const errorElement = document.createElement('p');
        errorElement.textContent = message;
        errorElement.style.cssText = `
            color: red;
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 5px;
            border-radius: 3px;
            font-family: sans-serif;
            font-size: 14px;
            max-width: calc(100% - 20px);
        `;

        const container = document.createElement('div');
        container.style.cssText = `
            position: relative;
            display: inline-block;
            border: 1px solid red;
        `;
        container.appendChild(canvas);
        container.appendChild(errorElement);
        return container;
    };

    try {
        // Step 1: Dynamically load the background removal library if it hasn't been loaded yet.
        // The library will be available under the global name `imglyRemoveBackground`.
        if (!window.imglyRemoveBackground) {
            await new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.4.0/dist/bundle.js';
                script.onload = resolve;
                script.onerror = () => reject(new Error('Failed to load the background removal library. Check network connection or CDN status.'));
                document.head.appendChild(script);
            });
        }

        // Step 2: Remove the background from the image.
        // The library requires a publicPath to fetch its model and WASM files.
        const foregroundBlob = await window.imglyRemoveBackground.removeBackground(originalImg, {
            publicPath: 'https://cdn.jsdelivr.net/npm/@imgly/background-removal@1.4.0/dist/',
            // Optional: Add a progress callback to monitor model download.
            // progress: (key, current, total) => {
            //      console.log(`Downloading ${key}: ${current} of ${total}`);
            // }
        });

        // Step 3: Create a new Image object from the resulting blob (which is a PNG with transparency).
        const foregroundUrl = URL.createObjectURL(foregroundBlob);
        const foregroundImg = new Image();

        await new Promise((resolve, reject) => {
            foregroundImg.onload = resolve;
            foregroundImg.onerror = () => reject(new Error('Failed to load processed image from blob.'));
            foregroundImg.src = foregroundUrl;
        });

        // Clean up the object URL to free memory.
        URL.revokeObjectURL(foregroundUrl);

        // Step 4: Create a new canvas to draw the final result (image + shadow).
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        // Calculate canvas dimensions to fit the image and its shadow without clipping.
        const paddingX = Math.abs(shadowOffsetX) + shadowBlur * 2;
        const paddingY = Math.abs(shadowOffsetY) + shadowBlur * 2;

        canvas.width = originalImg.width + paddingX;
        canvas.height = originalImg.height + paddingY;

        // Calculate the position to draw the image on the larger canvas.
        // This centers the image within the padding area.
        const drawX = (shadowBlur) + (shadowOffsetX > 0 ? 0 : -shadowOffsetX);
        const drawY = (shadowBlur) + (shadowOffsetY > 0 ? 0 : -shadowOffsetY);

        // Step 5: Configure and draw the shadow.
        ctx.shadowColor = shadowColor;
        ctx.shadowBlur = shadowBlur;
        ctx.shadowOffsetX = shadowOffsetX;
        ctx.shadowOffsetY = shadowOffsetY;

        // Step 6: Draw the foreground image. The canvas context will automatically apply the shadow behind it.
        ctx.drawImage(foregroundImg, drawX, drawY, originalImg.width, originalImg.height);

        return canvas;

    } catch (error) {
        console.error('Image processing failed:', error);
        return createErrorResult(originalImg, `Error: ${error.message}`);
    }
}