Problems with embedded images (img tag data)

4 posts, 1 answers
  1. Roland Klug
    Roland Klug avatar
    28 posts
    Member since:
    Dec 2002

    Posted 19 Apr 2011 Link to this post

    Hello Telerik,

    I use the RadEditor control to display html pages with embedded images, like so:

    <img width="436" height="184" alt="" id="Bild_x0020_1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg" />

    This works fine as long as the image is small (enough). When it gets larger, the data seems to be truncated, so that the image becomes invalid. Note that the resulting html code is not truncated, only the value of the source attribute is truncated.

    Is there any limitation in the size of embedded images? How can I override any limitation?

    Thanks for your appreciated help!
    Roland
  2. Answer
    Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 19 Apr 2011 Link to this post

    Hi Roland,

    RadEditor does not limit the src size of the embedded images and the problem is browser related.

    I found the following information which could be helpful:

    There are size limitations for inline images. Browsers are only required to support URLs up to 1,024 bytes in length, according to the above RFC. Browsers are more liberal in what they'll accept, however. Opera limits data URLs to about 4,100 characters. Firefox supports data URLs up to 100K, so this technique is best used for small, decorative images. In summary:

    • IE 5-7 does not support
    • More steps to update embedded content (reencode, reembed)
    • Length limits - technique is useful for smaller, decorative images
    • Base64 encoded images are roughly 33% larger than their binary equivalent

    The source article is http://www.websiteoptimization.com/speed/tweak/inline-images/

    Kind regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Vicenc Masanas
    Vicenc Masanas avatar
    38 posts
    Member since:
    Jul 2007

    Posted 28 Jan in reply to Rumen Link to this post

    Is there any setting to prevent users copy/pasting images directly into the editor? If they do this the image is automatically converted to base64 and saved to the DB as part of the text. This increases the size of the DB to much for our scenarios.

    Is there a way to prevent this directly from the editor configuration?

  4. Rumen
    Admin
    Rumen avatar
    14011 posts

    Posted 28 Jan Link to this post

    Hi Vicenc,

    Yes, you can use the OnClientPasteHtml client event to filter the images and strip them:

    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientPasteHtml="OnClientPasteHtml">
    </telerik:RadEditor>
      
    <script type="text/javascript">
        Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.supportsClipboardData = function (event) {
            return false;
        }
      
      
        function OnClientPasteHtml(editor, args) {
            var value = args.get_value();
            var strippedContent = value.replace(/\<img .+?\>/ig, "");
      
            var confirmStripping = confirm("Do you want to strip the images?");
            if (confirmStripping) {
                args.set_value(strippedContent);
            }
        }
    </script>

    You can check this forum thread for more information: Prevent images to be pasted in Radeditor.

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top