Image To File Writer Tool

function processImage(originalImg, defaultFilename = "output.png") {
    // Determine image mime type dynamically based on filename extension
    const getFormat = (fname) => {
        const ext = fname.split('.').pop().toLowerCase();
        if (ext === 'jpg' || ext === 'jpeg') return 'image/jpeg';
        if (ext === 'webp') return 'image/webp';
        return 'image/png';
    };

    // Container setup
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.gap = '15px';
    container.style.padding = '20px';
    container.style.border = '2px dashed #4A90E2';
    container.style.borderRadius = '10px';
    container.style.backgroundColor = '#f7fbff';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.boxSizing = 'border-box';
    container.style.maxWidth = '100%';

    // Title
    const title = document.createElement('h3');
    title.textContent = 'Image File Writer';
    title.style.margin = '0';
    title.style.color = '#333';

    // Canvas to hold the image data
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Preview Image (which users can drag)
    const previewImg = document.createElement('img');
    previewImg.src = canvas.toDataURL('image/png');
    previewImg.style.maxWidth = '100%';
    previewImg.style.maxHeight = '250px';
    previewImg.style.objectFit = 'contain';
    previewImg.style.border = '1px solid #ccc';
    previewImg.style.borderRadius = '5px';
    previewImg.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    previewImg.draggable = true;
    previewImg.title = "Drag this image to your desktop to save!";
    
    // Controls
    const controls = document.createElement('div');
    controls.style.display = 'flex';
    controls.style.gap = '10px';
    controls.style.alignItems = 'center';
    controls.style.flexWrap = 'wrap';
    controls.style.justifyContent = 'center';

    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.value = defaultFilename;
    nameInput.style.padding = '8px 12px';
    nameInput.style.border = '1px solid #b3d4ec';
    nameInput.style.borderRadius = '5px';
    nameInput.style.outline = 'none';

    const writeBtn = document.createElement('button');
    writeBtn.textContent = 'Write to File';
    writeBtn.style.padding = '8px 16px';
    writeBtn.style.backgroundColor = '#4A90E2';
    writeBtn.style.color = 'white';
    writeBtn.style.border = 'none';
    writeBtn.style.borderRadius = '5px';
    writeBtn.style.cursor = 'pointer';
    writeBtn.style.fontWeight = 'bold';
    writeBtn.style.transition = 'background 0.2s';
    
    writeBtn.onmouseover = () => writeBtn.style.backgroundColor = '#357ABD';
    writeBtn.onmouseleave = () => writeBtn.style.backgroundColor = '#4A90E2';

    // Save button click logic (File System Access API with a fallback)
    writeBtn.addEventListener('click', async () => {
        const fileName = nameInput.value.trim() || 'image.png';
        const format = getFormat(fileName);

        // Modern File System Access API
        if ('showSaveFilePicker' in window) {
            try {
                const blob = await new Promise(res => canvas.toBlob(res, format));
                const handle = await window.showSaveFilePicker({
                    suggestedName: fileName,
                    types: [{
                        description: 'Image',
                        accept: { [format]: [`.${fileName.split('.').pop()}`] }
                    }]
                });
                const writable = await handle.createWritable();
                await writable.write(blob);
                await writable.close();
                return;
            } catch (e) {
                if (e.name === 'AbortError') return; // The user cancelled the save
                console.warn('File System hook failed, falling back to basic download.', e);
            }
        }

        // Classical fallback method via <a> tag
        const a = document.createElement('a');
        a.href = canvas.toDataURL(format);
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });

    // Drag-out to desktop logic (Browser native feature support)
    previewImg.addEventListener('dragstart', (e) => {
        const fileName = nameInput.value.trim() || 'image.png';
        const format = getFormat(fileName);
        const dataUrl = canvas.toDataURL(format);
        
        // This specific header lets Chromium browsers drag the generated file out to the OS shell native file system
        e.dataTransfer.setData('DownloadURL', `${format}:${fileName}:${dataUrl}`);
    });

    const hint = document.createElement('span');
    hint.textContent = "Tip: Drag & Drop the image above to your desktop, or use the Write button to securely save it.";
    hint.style.fontSize = '12px';
    hint.style.color = '#666';
    hint.style.textAlign = 'center';

    // Assemble elements
    controls.appendChild(nameInput);
    controls.appendChild(writeBtn);

    container.appendChild(title);
    container.appendChild(previewImg);
    container.appendChild(controls);
    container.appendChild(hint);

    return container;
}