Image URL To Database Converter

function processImage(originalImg, format = 'image/png', quality = '0.92', tableName = 'images', columnName = 'image_data') {
    // Determine format and quality
    const imgFormat = (format.toLowerCase() === 'image/jpeg' || format.toLowerCase() === 'image/webp') ? format.toLowerCase() : 'image/png';
    const imgQuality = parseFloat(quality) || 0.92;

    // Create a canvas to extract the image data
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width || 300;
    canvas.height = originalImg.height || 300;
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Convert the canvas to a Data URI (Base64)
    const dataUri = canvas.toDataURL(imgFormat, imgQuality);
    
    // Generate a ready-to-use SQL INSERT statement
    const sqlStatement = `INSERT INTO ${tableName} (${columnName}) VALUES ('${dataUri}');`;

    // Create the UI Container
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '15px';
    container.style.padding = '20px';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#fcfcfc';
    container.style.boxSizing = 'border-box';
    container.style.width = '100%';

    // Title
    const title = document.createElement('h3');
    title.textContent = 'Image to Database Converter';
    title.style.margin = '0 0 5px 0';
    title.style.color = '#333';
    container.appendChild(title);

    // Helper function to create textarea sections
    const createSection = (labelText, content) => {
        const wrapper = document.createElement('div');
        wrapper.style.display = 'flex';
        wrapper.style.flexDirection = 'column';
        wrapper.style.gap = '5px';

        const label = document.createElement('label');
        label.textContent = labelText;
        label.style.fontWeight = 'bold';
        label.style.fontSize = '14px';
        label.style.color = '#555';
        wrapper.appendChild(label);

        const textarea = document.createElement('textarea');
        textarea.value = content;
        textarea.rows = 5;
        textarea.style.width = '100%';
        textarea.style.resize = 'vertical';
        textarea.style.padding = '10px';
        textarea.style.border = '1px solid #ccc';
        textarea.style.borderRadius = '4px';
        textarea.style.boxSizing = 'border-box';
        textarea.style.fontFamily = 'monospace';
        textarea.style.fontSize = '12px';
        textarea.readOnly = true;
        
        // Let the user copy text on click
        textarea.addEventListener('click', () => {
            textarea.select();
        });

        wrapper.appendChild(textarea);
        return wrapper;
    };

    // Add Base64 Text Area
    container.appendChild(createSection('1. Base64 Data URI (For JSON/NoSQL/Frontend):', dataUri));

    // Add SQL Insert Statement Text Area
    container.appendChild(createSection(`2. SQL INSERT Statement (Table: ${tableName}):`, sqlStatement));

    // Image Preview Section
    const previewWrapper = document.createElement('div');
    previewWrapper.style.display = 'flex';
    previewWrapper.style.flexDirection = 'column';
    previewWrapper.style.gap = '5px';

    const previewLabel = document.createElement('label');
    previewLabel.textContent = '3. Result Preview:';
    previewLabel.style.fontWeight = 'bold';
    previewLabel.style.fontSize = '14px';
    previewLabel.style.color = '#555';
    previewWrapper.appendChild(previewLabel);

    const previewImg = new Image();
    previewImg.src = dataUri;
    previewImg.style.maxWidth = '100%';
    previewImg.style.maxHeight = '250px';
    previewImg.style.objectFit = 'contain';
    previewImg.style.border = '1px dashed #aaa';
    previewImg.style.borderRadius = '4px';
    previewImg.style.backgroundColor = '#fff';
    previewWrapper.appendChild(previewImg);

    container.appendChild(previewWrapper);

    return container;
}