Image To 2011 Stock PNG Converter

/**
 * Converts an image to a "2011 Stock PNG" style by applying filters
 * and a tiled watermark, reminiscent of early 2010s stock photography.
 * This function is an artistic interpretation of that aesthetic.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A new canvas element containing the styled image.
 */
function processImage(originalImg) {
    // 1. Create a canvas with the same dimensions as the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const {
        naturalWidth: width,
        naturalHeight: height
    } = originalImg;
    canvas.width = width;
    canvas.height = height;

    // 2. Apply image filters to emulate the early 2010s digital photo look.
    // This aesthetic often featured high contrast, boosted saturation, and a bright, 'clean' feel.
    ctx.filter = 'saturate(1.3) contrast(1.15) brightness(1.05)';

    // Draw the filtered image onto the canvas.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Reset the filter so it does not affect the subsequent watermark drawing.
    ctx.filter = 'none';

    // 3. Add a classic, tiled "stock photo" watermark.
    ctx.save();

    const watermarkText = "© StockImage 2011";
    // Scale font size relative to the image size for a consistent look.
    const fontSize = Math.max(12, Math.floor(Math.sqrt(width * height) / 30));
    ctx.font = `bold ${fontSize}px Arial`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Use semi-transparent white for the fill and a subtle dark stroke for visibility on all backgrounds.
    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
    ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
    ctx.lineWidth = 1;

    // Define the rotation for the watermark text.
    const angle = -Math.PI / 6; // -30 degrees

    // Define a uniform grid step size based on the image's diagonal for consistent spacing.
    const step = Math.sqrt(width * width + height * height) / 5; // ~5 watermarks along the diagonal

    // Loop over a grid that extends beyond the canvas bounds to ensure full coverage,
    // especially in the corners after rotation.
    for (let y = 0; y < height + step; y += step) {
        for (let x = 0; x < width + step; x += step) {
            ctx.save();

            // Stagger every other row to create a more dynamic, less rigid pattern.
            const staggerOffset = ((Math.floor(y / step) % 2) * step) / 2;
            // Center the grid over the image by offsetting the starting point.
            ctx.translate(x + staggerOffset - step / 2, y - step / 2);

            ctx.rotate(angle);

            // Draw the text outline and then the fill.
            ctx.strokeText(watermarkText, 0, 0);
            ctx.fillText(watermarkText, 0, 0);

            ctx.restore();
        }
    }

    ctx.restore();

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