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

Get image - how to access imageBase64 of imageData? #433

Closed MikeIsNotHere closed 5 months ago

MikeIsNotHere commented 5 months ago

Hey,

I am bulding something in ASP.NET core 7 and I have been trying to implement Filerobot Image Editor. I am having trouble the the GetImageData function. How do i access the imageBase64 property of imageData? This is my code, what am i doing wrong?

`@{
    var imageUrl = Url.Action("GetImage", new { id = ViewBag.ImageId });
}
<div id="editor_container" class="w-100 h-100"></div>
<input type="button" value="Save" onClick="clickHandler()" />
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>
<script>
    //const filerobotImageEditor = new FileRobotImageEditor();

    const config = {
        source: '@imageUrl',
        onSave: function (editedImageObject, designState) {
            // onSave logic (if needed)
        },
        removeSaveButton: true,
        onClose: (closingReason) => {
                    console.log('Closing reason', closingReason);
                    filerobotImageEditor.terminate();
                },
    }

   const filerobotImageEditor = new FilerobotImageEditor(
        document.querySelector('#editor_container'),
        config,
    );

    filerobotImageEditor.render();

    function clickHandler() {
        const imageData = filerobotImageEditor.getCurrentImgData(); // Or the correct method to get the image data
        alert(imageData);
        console.log(imageData);
        if (imageData) {
            //saveEditedImage(imageData);
        } else {
            console.error('No image data found');
        }
    }

    function saveEditedImage(imageData) {
        const imageId = @ViewBag.ImageId;
        const apiUrl = `/SaveImage/${imageId}`;
        console.log(imageData)
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // Add authorization headers if needed
            },
            body: JSON.stringify({ imageData: imageData })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                // Additional success handling logic here
            })
            .catch(error => {
                console.error('Error:', error);
                // Additional error handling logic here
            });
    }
</script>
<style>
    .FIE_topbar-save-button {
        display: none;
    }
</style>
`
MikeIsNotHere commented 5 months ago

I found the problem. This is the relevant part of my solution:

let base64ImageData = imageData.imageData.imageBase64;

// Check if the base64 string contains the data URL scheme and remove it
const base64DataPrefix = 'base64,';
const base64StartIndex = base64ImageData.indexOf(base64DataPrefix);
if (base64StartIndex !== -1) {
    // Adjust the index to start after the comma
    base64ImageData = base64ImageData.substring(base64StartIndex + base64DataPrefix.length);
}