Insert images with a base64 string in the src via the Image Manager

RELATED TO:

AUTHOR: Rumen Zhekov

DATE POSTED: August 10, 2018

HOW-TO

When inserting Images in the RadEditor by ImageManger, I want to use src="data:image/png;base64,xxxxxxxxxxx" instead of the Image URL src="../../images/xxx.png".

InsertBase64Images

SOLUTION

You can convert the src of inserted via the Image Manager images to base64 string using the OnClientPasteHtml event and the solution provided in How to convert image into base64 string using javascript, i.e.

<script>
    function OnClientPasteHtml(editor, args) {
        var commandName = args.get_commandName();
        var value = args.get_value();
 
        if (commandName == "ImageManager") {
            var div = document.createElement("DIV");
            Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
            var img = div.firstChild;
            img.setAttribute("onload", "window.parent.workWithCanvas(this);");
            args.set_value(div.innerHTML);
        }
    }
 
    function workWithCanvas(img) {
        var c = document.createElement('canvas');
        c.height = img.naturalHeight;
        c.width = img.naturalWidth;
        var ctx = c.getContext('2d');
 
        ctx.drawImage(img, 0, 0, c.width, c.height, 0, 0, c.width, c.height);
        var base64String = c.toDataURL();
        img.setAttribute("src", base64String);
        img.removeAttribute("onload");
    }
</script>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images"></ImageManager>
</telerik:RadEditor>

Pro Tips

Please note that the use of data:image/png;base64 images could:

  • Produce a large amount of data that may slow down the browser.
  • Overload your server when saving this huge content

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.