Image Decorator

/**
 * Decorates an image by adding a colored border and an optional text overlay.
 * The function supports dynamic loading of Google Fonts for the text.
 *
 * @param {Image} originalImg The original JavaScript Image object to decorate.
 * @param {number} borderWidth The width of the border in pixels. Defaults to 10.
 * @param {string} borderColor A CSS color string for the border. Defaults to 'gold'.
 * @param {string} text The text to overlay on the image. An empty string will draw no text. Defaults to 'Decorated Image'.
 * @param {string} textColor A CSS color string for the text fill. Defaults to 'white'.
 * @param {string} textStrokeColor A CSS color string for the text outline. Defaults to 'black'.
 * @param {number} fontSize The font size in pixels for the text. Defaults to 48.
 * @param {string} fontFamily The font family for the text. Tries to load from Google Fonts if not a web-safe font. Defaults to 'Impact'.
 * @param {string} textPosition The position of the text on the image. Accepts 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'center'. Defaults to 'bottom-right'.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with the decorated image as an HTMLCanvasElement.
 */
async function processImage(originalImg, borderWidth = 10, borderColor = 'gold', text = 'Decorated Image', textColor = 'white', textStrokeColor = 'black', fontSize = 48, fontFamily = 'Impact', textPosition = 'bottom-right') {
  
  // Helper function to load a font, attempting to use Google Fonts as a fallback.
  const loadFont = async (fontToLoad) => {
    const webSafeFonts = ['Arial', 'Verdana', 'Helvetica', 'Tahoma', 'Trebuchet MS', 'Times New Roman', 'Georgia', 'Garamond', 'Courier New', 'Brush Script MT', 'Impact', 'Comic Sans MS', 'cursive', 'fantasy', 'monospace', 'sans-serif', 'serif'];
    
    // If it's a generic family or web-safe font, no need to load it.
    if (webSafeFonts.some(safeFont => fontToLoad.toLowerCase().includes(safeFont.toLowerCase()))) {
      return fontToLoad;
    }

    try {
      // Check if the font is already available to the browser.
      if (document.fonts && document.fonts.check(`1em "${fontToLoad}"`)) {
        return fontToLoad;
      }

      // Create the Google Fonts URL.
      const fontUrl = `https://fonts.googleapis.com/css2?family=${fontToLoad.replace(/ /g, '+')}&display=swap`;
      
      // Add the stylesheet link to the document head if it doesn't already exist.
      if (!document.querySelector(`link[href="${fontUrl}"]`)) {
        const link = document.createElement('link');
        link.href = fontUrl;
        link.rel = 'stylesheet';
        document.head.appendChild(link);

        // Wait for the stylesheet to load before trying to use the font.
        await new Promise((resolve, reject) => {
          link.onload = resolve;
          link.onerror = reject;
        });
      }

      // Wait for the browser to be ready to render with the new font.
      await document.fonts.load(`1em "${fontToLoad}"`);
      return fontToLoad;
    } catch (error) {
      console.error(`Failed to load Google Font: ${fontToLoad}. Falling back to 'Arial'.`, error);
      return 'Arial'; // Return a fallback font name on error.
    }
  };

  // Ensure the font is loaded before drawing, and update fontFamily with the result (in case of fallback).
  const finalFontFamily = await loadFont(fontFamily);

  // Create a new canvas element.
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Sanitize numeric inputs.
  const numBorderWidth = Number(borderWidth) || 0;
  const numFontSize = Number(fontSize) || 12;

  // Set the canvas dimensions to accommodate the image and the border.
  canvas.width = originalImg.naturalWidth + 2 * numBorderWidth;
  canvas.height = originalImg.naturalHeight + 2 * numBorderWidth;

  // Draw the border by filling the entire canvas with the border color.
  if (numBorderWidth > 0) {
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  // Draw the original image onto the canvas, inside the border.
  ctx.drawImage(originalImg, numBorderWidth, numBorderWidth, originalImg.naturalWidth, originalImg.naturalHeight);

  // If text is provided, draw it on top.
  if (text && text.trim() !== '') {
    // Set text style properties.
    ctx.font = `${numFontSize}px "${finalFontFamily}"`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = textStrokeColor;
    ctx.lineWidth = Math.max(1, numFontSize / 24); // A relative stroke width looks good.

    let x, y;

    // Calculate text position based on the 'textPosition' parameter.
    const margin = 10 + numBorderWidth;
    switch (textPosition) {
      case 'top-left':
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top';
        x = margin;
        y = margin;
        break;
      case 'top-right':
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        x = canvas.width - margin;
        y = margin;
        break;
      case 'bottom-left':
        ctx.textAlign = 'left';
        ctx.textBaseline = 'bottom';
        x = margin;
        y = canvas.height - margin;
        break;
      case 'center':
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        x = canvas.width / 2;
        y = canvas.height / 2;
        break;
      case 'bottom-right':
      default:
        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';
        x = canvas.width - margin;
        y = canvas.height - margin;
        break;
    }

    // Draw the text stroke (outline) first, then the fill, for better visibility.
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);
  }

  // Return the final canvas element.
  return canvas;
}