scaleflex / filerobot-image-editor

Edit, resize, and filter any image! Any questions or issues, please report to https://github.com/scaleflex/filerobot-image-editor/issues
MIT License
1.26k stars 321 forks source link

Clicking the save button does not do anything #457

Closed andrej-koman closed 2 months ago

andrej-koman commented 2 months ago

Hello, im using VanillaJS implementation of the FilerobotImageEditor, with the config and setup below, i can edit the photo, but upon clicking the Save button, nothing happens. The console is clear and i get no sort of indication of what is going on. I have followed the docs, and i would like to know if there is something im missing?

The script

            const {TABS, TOOLS} = window.FilerobotImageEditor;
            const config = {
                theme: {
                    palette: {
                        'bg-primary-active': '#ECF3FF',
                    },
                    typography: {
                        fontFamily: 'sans-serif',
                    },
                },
                onSave: (editedImageObject, designState) => {
                    console.log('saved', editedImageObject, designState)
                    var tmpLink = document.createElement('a');
                    tmpLink.href = editedImageObject.imageBase64;
                    tmpLink.download = editedImageObject.fullName;
                    tmpLink.style = 'position: absolute; z-index: -111; visibility: none;';
                    document.body.appendChild(tmpLink);
                    tmpLink.click();
                    document.body.removeChild(tmpLink);
                    tmpLink = null;
                },
                onClose: (closingReason) => {
                    console.log('Closing reason', closingReason);
                    filerobotImageEditor.terminate();
                    document.querySelector('#image_edit').style.display = 'none'
                },
                source: theLink,
                Rotate: {angle: 90, componentType: 'slider'},
                tabsIds: [TABS.ADJUST, TABS.FINETUNE, TABS.FILTERS, TABS.RESIZE],
                defaultTabId: TABS.ADJUST,// or 'Annotate'
            };

            let filerobotImageEditor;
            try {
                filerobotImageEditor = new window.FilerobotImageEditor(
                    document.querySelector('#image_edit'),
                    config,
                );
            } catch (e) {
                console.error(e)
            }

            document.querySelector('#image_edit').style.display = 'block'

            filerobotImageEditor.render();

The element

<div id="image_edit" style="z-index: 9999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: none;"></div>
ysachiko commented 2 months ago

maybe solution in z-index. try to change to 100

andrej-koman commented 2 months ago

maybe solution in z-index. try to change to 100

This worked! Thank you so much.