Image Name Changer Tool

function processImage(originalImg, newFileName = "renamed_image.png") {
    // Create a container to hold the image and the download button
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '15px';
    container.style.fontFamily = 'Arial, sans-serif';

    // Create a canvas to draw the original image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #ccc';
    canvas.style.borderRadius = '4px';

    // Draw the image onto the canvas
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Ensure the filename has an extension to work properly upon downloading
    if (!/\.[a-zA-Z0-9]+$/.test(newFileName)) {
        newFileName += '.png';
    }

    // Create a download link that enforces the new image name
    const downloadLink = document.createElement('a');
    downloadLink.textContent = `Download Image as "${newFileName}"`;
    downloadLink.download = newFileName;
    downloadLink.href = canvas.toDataURL('image/png');
    downloadLink.style.padding = '12px 24px';
    downloadLink.style.backgroundColor = '#007bff';
    downloadLink.style.color = '#ffffff';
    downloadLink.style.textDecoration = 'none';
    downloadLink.style.borderRadius = '5px';
    downloadLink.style.fontWeight = 'bold';
    downloadLink.style.cursor = 'pointer';
    downloadLink.style.transition = 'background-color 0.2s';

    // Hover effect for the download button
    downloadLink.onmouseover = () => downloadLink.style.backgroundColor = '#0056b3';
    downloadLink.onmouseout = () => downloadLink.style.backgroundColor = '#007bff';

    // Append elements to the container
    container.appendChild(canvas);
    container.appendChild(downloadLink);

    return container;
}