We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Save images as base64 strings

Hello

I am using EJ 2 v17.1.0.49 (nuget package).

Is there an easy way to convert all images to base64 strings (without any blob urls)?
(That the image's source property is the base64 string, which is visible in the RTE.value property)


Kind regards
Phil


3 Replies

BS Buvana Sathasivam Syncfusion Team June 5, 2019 11:38 AM UTC

Hi Phil, 

Thanks for using Syncfusion Products. 

You can easily convert the blob URL image into Base64 image in Rich Text Editor content using actionComplete event.  As per behavior, we have created a blob URL for the image and set the `src` property of <img> tag in the Rich Text Editor content.   In actionComplete event, we have converted the base64 image and set into image src attribute.  Please find the below code for your reference. 

Index.cshtml 

<ejs-richtexteditor id="default" actionComplete="actionComplete"></ejs-richtexteditor> 
 
<script type="text/javascript"> 
    function actionComplete(args) {  // Triggered when every action is completed 
        if (args.requestType == "Image") {  // Check image actionComplete 
            imgelement = args.elements[0]; 
            toBase64(imgelement.src, function (dataUrl) { 
                imgelement.setAttribute('src', dataUrl) // Set converted base64 image into RTE 
            }) 
        } 
    } 
    function toBase64(url, callback) { 
        var httpRequest = new XMLHttpRequest(); 
        httpRequest.onload = function () { 
            var fileReader = new FileReader(); 
            fileReader.onloadend = function () { // Triggered each time the rendering operation complete 
                callback(fileReader.result); 
            } 
            fileReader.readAsDataURL(httpRequest.response); // Read the content of the specified file or Blob 
        }; 
        httpRequest.open('GET', url); 
        httpRequest.responseType = 'blob'; 
        httpRequest.send(); 
    } 
</script> 



In above sample, we have converted the blob URL image into Base64 image and got the Rich Text Editor value when click the external button. 

Regards, 
Buvana S 



UN Unknown June 7, 2019 06:14 AM UTC

This is exactly what I was looking for.

Thank you very much.


PO Prince Oliver Syncfusion Team June 7, 2019 06:17 AM UTC

Hi Phil, 

Most welcome. We are glad to help you.  

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon