Base64 of the edited image

[Rogerio]

how to get base64 from the edited image, any sample or documentation?

 

tks

[Stoyan]

Hello Rogerio,
Thank you for your question.

To get the base64 of an image you have already edited use the getCurrentImage() method. This Dojo sample showcases the behavior. In it import a new image to get its base64 in the browser's console.

Alternatively, you can use the getCanvasElement method and then apply the HTMLCanvasElement.toDataURL() to it. Review this approach here.

Hopefully the above helps.

Regards,
Stoyan
Progress Telerik

[Rogerio]

Thank you, it worked with your tips, I did it like this with PHP:

 

JS:

       var imageEditor = $("#imageEditor").getKendoImageEditor();
        var canvas = imageEditor.getCanvasElement();
        var image = canvas.toDataURL();

            $.ajax({
            url:"saveimageeditor.php",
            // send the base64 post parameter
            data:{
                filename: '<?php echo $filelo; ?>',
                base64: image
            },
            // important POST method !
            type:"post",
            complete:function(){
                console.log("Image saved successfully!");
            }

 

PHP :

// baseFromJavascript will be the javascript base64 string retrieved of some way (async or post submited)

//your data in base64 'data:image/png....'
$baseFromJavascript = $_POST['base64'];

// We need to remove the "data:image/png;base64,"
$base_to_php = explode(',', $baseFromJavascript);

// the 2nd item in the base_to_php array contains the content of the image
$data = base64_decode($base_to_php[1]);

$filepath = $_POST['filename'];

// Save the image
file_put_contents($filepath,$data);

 

 

[Stoyan]

Hi Rogerio,

I am glad the suggested solution worked. Thank you for sharing you code, I'm sure it will be useful to our community.

Regards,
Stoyan
Progress Telerik