Link to home
Start Free TrialLog in
Avatar of WestCoast_BC
WestCoast_BCFlag for Canada

asked on

Using ToastUI ImageEditor need help saving the image

I am trying to use ToastUI ImageEditor tool to edit images (ToastUI ImageEditor). I can load the tool and edit an image but I cannot figure out how to save the edited image.

Can someone provide an example or help me figure out how to save the image?
Avatar of leakim971
leakim971
Flag of Guadeloupe image

On this page : https://nhn.github.io/tui.image-editor/latest/tutorial-example02-useApiDirect
There's a download button, which save the image before you can download it, here the code when you click on the button :

$btnDownload.on('click', function() {
    var imageName = imageEditor.getImageName();
    var dataURL = imageEditor.toDataURL();
    var blob, type, w;


    if (supportingFileAPI) {
        blob = base64ToBlob(dataURL);
        type = blob.type.split('/')[1];
        if (imageName.split('.').pop() !== type) {
            imageName += '.' + type;
        }


        // Library: FileSaver - saveAs
        saveAs(blob, imageName); // eslint-disable-line
    } else {
        alert('This browser needs a file-server');
        w = window.open();
        w.document.body.innerHTML = '<img src="' + dataURL + '">';
    }
});

Open in new window

line 3, dataURL, is a base64 image string you can send to your server using Ajax :

User generated image
Avatar of WestCoast_BC

ASKER

Thank you. How do I send the base64 image string to the server using Ajax?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial