Image Watermark Generator From PNG

/**
 * Applies a PNG watermark to an image.
 *
 * @param {Image} originalImg The original image object to be watermarked.
 * @param {string} watermarkImgSrc The data URL or source URL of the PNG watermark image.
 * @param {string} position The position of the watermark. Can be 'top-left', 'top-right', 'bottom-left', 'bottom-right', or 'center'. Defaults to 'bottom-right'.
 * @param {number} opacity The opacity of the watermark, a value between 0 (completely transparent) and 1 (completely opaque). Defaults to 0.5.
 * @param {number} scale The scale of the watermark relative to the smaller dimension of the original image. For example, 0.2 means 20%. Defaults to 0.15.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the canvas element containing the watermarked image.
 */
async function processImage(originalImg, watermarkImgSrc = '', position = 'bottom-right', opacity = 0.5, scale = 0.15) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

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

    // If no watermark source is provided, return the canvas with just the original image
    if (!watermarkImgSrc) {
        console.warn("Watermark source is empty. Returning original image.");
        return canvas;
    }

    // Function to load an image and return a promise
    const loadImage = (src) => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            // Allow loading of cross-origin images if the server supports it
            img.crossOrigin = "Anonymous";
            img.onload = () => resolve(img);
            img.onerror = (err) => reject(new Error(`Failed to load watermark image from: ${src}`));
            img.src = src;
        });
    };

    try {
        const watermarkImg = await loadImage(watermarkImgSrc);

        // Calculate watermark dimensions based on scale and original image size
        const shorterSide = Math.min(originalImg.width, originalImg.height);
        const watermarkWidth = shorterSide * scale;
        const watermarkHeight = watermarkImg.height * (watermarkWidth / watermarkImg.width);

        // Define padding from the edges
        const padding = Math.max(10, shorterSide * 0.02); // 2% padding or at least 10px

        // Calculate watermark position
        let x, y;
        switch (position) {
            case 'top-left':
                x = padding;
                y = padding;
                break;
            case 'top-right':
                x = originalImg.width - watermarkWidth - padding;
                y = padding;
                break;
            case 'bottom-left':
                x = padding;
                y = originalImg.height - watermarkHeight - padding;
                break;
            case 'center':
                x = (originalImg.width - watermarkWidth) / 2;
                y = (originalImg.height - watermarkHeight) / 2;
                break;
            case 'bottom-right':
            default:
                x = originalImg.width - watermarkWidth - padding;
                y = originalImg.height - watermarkHeight - padding;
                break;
        }

        // Apply opacity
        ctx.globalAlpha = Math.max(0, Math.min(1, opacity));

        // Draw the watermark image onto the canvas
        ctx.drawImage(watermarkImg, x, y, watermarkWidth, watermarkHeight);

        // Reset opacity for any subsequent drawing
        ctx.globalAlpha = 1.0;

    } catch (error) {
        console.error(error);
        // If the watermark fails to load, we still return the canvas with the original image.
        // The error is logged to the console for debugging.
    }

    return canvas;
}