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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Save images as base64 strings

Thread ID:

Created:

Updated:

Platform:

Replies:

145045 Jun 4,2019 07:27 AM UTC Jun 7,2019 06:17 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Rich Text Editor
Phil
Asked On June 4, 2019 07:27 AM UTC

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 [Syncfusion]
Replied On 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 


Phil
Replied On June 7, 2019 06:14 AM UTC

This is exactly what I was looking for.

Thank you very much.

Prince Oliver [Syncfusion]
Replied On June 7, 2019 06:17 AM UTC

Hi Phil, 

Most welcome. We are glad to help you.  

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon