Save images as base64 strings

[Unknown]

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

[Buvana Sathasivam]

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> 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RichTextEditor-2066264979  

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 

[Unknown]

This is exactly what I was looking for.

Thank you very much.

[Prince Oliver]

Hi Phil, 

Most welcome. We are glad to help you.  

Regards, 

Prince