Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Editor > Resizing an image during upload

Not answered Resizing an image during upload

Feed from this thread
  • Posted on Feb 4, 2010 (permalink)

    Requirements

    RadControls version

    RadControls for ASP.NET AJAX
                      2009
    .NET version

    2.0/3./4.0
    Visual Studio version

    2005/2008/2010
    programming language C#/VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This code library shows how to resize the uploaded image in the RadEditor's ImageManager. The implemented FileBrowserContentProvider (ChangeImageSizeProvider) can be used with RadFileExplorer as well.

    Reply

  • Tad avatar

    Posted on Feb 21, 2011 (permalink)

    This code is extremely helpful and works great.

    Is there a way to pass down a size parameter, or to fetch a property of the RadEditor?

    Instead of a hardcoded size, I'd like to be able to set the reformatted size as a property of a custom radEditor.

    Thanks,

    --Tad Richard

    Reply

  • Rumen Rumen admin's avatar

    Posted on Feb 24, 2011 (permalink)

    Hi Tad,

    You can see the following forum thread on the subject: Custom Upload File Fields, which will help you to add custom upload file fields where the user will enter the desired image dimensions and after that you will be able to obtain these values and supply them to the StoreFile / StoreBitmap functions of your file browser content provider.

    Best regards,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

    Reply

  • Tad avatar

    Posted on Feb 24, 2011 (permalink)

    Rumen,

    Thanks for pointing me toward that thread, but it's not exactly what I'm trying to do.

    I have an administrative interface that uses multiple RadEditors to edit the various regions of a web page.  So for RadEditor1 (editing the main content area), I might want to reformat all the images to be no wider than 400 pixels.  And for RadEditor2 (editing the right sidebar), I might want to reformat all the images to be no wider than 200 pixels; etc.  I want this to be coded as a setting on each editor, and not set by the end user.

    What I *think* I need is a method for determining -- from within the FileBrowserContentProvider --which RadEditor control initiated the instance of the FileBrowserContentProvider.  That way, I can create a custom editor (extending RadEditor) that has a MaxImageWidth property, and get the value of that property from within the StoreFile event of the FileBrowserContentProvider.

    Not sure if it's possible, but thought I'd ask.

    Best,

    --Tad

    Reply

  • Rumen Rumen admin's avatar

    Posted on Mar 1, 2011 (permalink)

    Hello Tad,

    The requested feature can be easily implemented on the client using as a base the solution provided in the following KB article: Resizing images proportional in Internet Explorer. You can modify the code to stop the resizing above the specified boundaries. Using editor.get_id() method you can check the id of the current editor and set the allowed width and height values for images inside this editor.

    Another approach is to use the current HttpContext object to pass parameters to the content provider. As you probably noticed, the context is part of the provider constructor. For example set the desired images paths, dimensions, editor id, etc as a value of the ViewPaths property and after that obtain this information from the constructor of the content provider, e.g.

    Set the value in the context instead of ViewPaths:
    Copy Code
    void setExplorerViewPath ()
    {
        if (!string.IsNullOrEmpty (this.XmlFilePath))
        {
            explorer.Configuration.ViewPaths = new string [] { XmlFilePath + InitialPath };
            Context.Items.Add("testItem", "testValue");
        }
    }

    Access the value inside the content provider code:
    Copy Code
    public override DirectoryItem ResolveRootDirectoryAsTree (string path)
    {
        string value = Context.Items["testItem"].ToString();
        return resolveDirectory (value, path, true, false);
    }

    If you do not want to use the context, then you can do a little hack and store the value in the ViewPath, but then change the ViewPath in the provider constructor -e.g. remove the path to the xml file and replace it with something else ("/").


    Kind regards,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

    Reply

  • Tad avatar

    Posted on Mar 2, 2011 (permalink)

    Thanks for the good advice, Rumen,

    Because I wanted it all to be done server-side, I hacked the viewPath property to inject the size values when constructing the FileSystemContentProvider, and overrode the ResolveRootDirectoryAsTree method to ignore them.

    Maybe I was doing something wrong, but when I tried to modify the constructor to pull the values back out of the hacked veiwPath, it was not working.  It appeared to me that the base constructor class does something with viewPath that can't be undone by the derived class re-setting the property.

    In any case, I have it working well enough for what I need.

    Thanks, as always, for the great support.

    --Tad

    Reply

  • GK avatar

    Posted on Jul 1, 2011 (permalink)

    Hi,

    I am trying to fix the widht and height of the image chosen in telerik RadEditior, i have tried with both Javascript and C# code saperately which i found in forums, but could not resolve.
    I am using V.S 2010 and telerik product version 2009.3.1103.35.

    Javascript used:

     

     

    <script type="text/javascript">  

     

    function OnClientLoad(editor, args) {  

    editor.attachEventHandler( 

    "oncontrolselect", function () {  

    //Check if image  

    window.setTimeout(

    function () {  

    var selElem = editor.getSelection().getParentElement();  

    alert(selElem.tagName); 

    if (selElem.tagName == "IMG") {  

    //Store current width and height  

    curWidth = selElem.offsetWidth;

    curHeight = selElem.offsetHeight; 

    //Possible to resize, so attach eventhandler  

    selElem.onresizeend = 

    function (e) {  

    alert("I was resized");  

    selElem.style.width = "150";  

    selElem.style.height ="150"

    selElem.onresizeend = null; //remove handler  

     

    //Make calculations about skaling, then re-size image  

    };

    }

    }, 0);

    });

    }
    Code used in C#

    The one which i have found in these attachements,
    In page_load
    { string [] paths = new string[] { "~/Images/editor" };

     

    RadEditor1.ImageManager.ViewPaths = paths;

    RadEditor1.ImageManager.UploadPaths = paths;

    RadEditor1.ImageManager.DeletePaths = paths;

    RadEditor1.ImageManager.ContentProviderTypeName =

     

    typeof(ChangeImageSizeProvider).AssemblyQualifiedName;
    }

     public class ChangeImageSizeProvider : Telerik.Web.UI.Widgets.FileSystemContentProvider 

    public ChangeImageSizeProvider(HttpContext context, string[] searchPatterns, string[] viewPaths, string[] uploadPaths, string[] deletePaths, string selectedUrl, string selectedItemTag) 

    base(context, searchPatterns, viewPaths, uploadPaths, deletePaths, selectedUrl, selectedItemTag)  

    {  

    public override string StoreFile(UploadedFile file, string path, string name, params string[] arguments)

     {
    System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream);  

    string physicalPath = Context.Server.MapPath(path); 
     int newWidth = 100;// Fixed width 
     int newHeight = 100;// Fixed height  

    System.Drawing.Image resultImage = ResizeImage(image, new Size(newWidth, newHeight));

     resultImage.Save(physicalPath + name); 

    string result = path + name; 
     return result;  

    }

     

    private System.Drawing.Image ResizeImage(System.Drawing.Image sourceImage, Size newSize)  

    Bitmap bitmap = new Bitmap(newSize.Width, newSize.Height); 
     Graphics g = Graphics.FromImage((System.Drawing.Image)bitmap);

    g.InterpolationMode = InterpolationMode.HighQualityBicubic;  

    g.DrawImage(sourceImage, 0, 0, newSize.Width, newSize.Height);

    g.Dispose();

     return (System.Drawing.Image)bitmap;  

    }

    }

     

     I have a save option with which i am saving 

     

     asdf.Content = this.RadEditor1.Content;

     asdf.save();

    Please let me know, if I need to do anything else.

    Thanks
    G Krishna

    Reply

  • Rumen Rumen admin's avatar

    Posted on Jul 5, 2011 (permalink)

    Hi Gopi,

    You are using a very old version of RadEditor, which does not support the latest version of IE9. The oncontrolselect event is also supported only by Internet Explorer. This means that the JavaScript solution works in IE only but not in other browsers.

    As to the FileSystemContent provider it works only when uploading images via the Upload dialog of the Image manager. Note that the user will be still able to resize the images in the content area even if they are inserted with minimal size in the content area.

    You can disable the image resizing in IE by setting the unselectable="on" attribute to all IMG tags in the content area, then the browser will not display the image handlers, e.g.

    <script type="text/javascript">
    function OnClientSelectionChange(editor)
    {
    var images = editor.get_document().getElementsByTagName("IMG");
    for (var i = 0; i < images.length; i++)
    {
    var image = images[i];
    image.setAttribute("unselectable", "on");
    }
    }
    </script>

    <telerik:RadEditor ID="RadEditor1"

    OnClientSelectionChange="OnClientSelectionChange"

    runat="server" Width="100%" Height="345px">
    <Content>
    <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
    <a href="www.telerik.com">telerik</a>
    <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
    </Content>
    </telerik:RadEditor>

    The unselectable attribute is supported by IE. Opera, Chrome and Safari do not offer resize handlers for the images.

    Best 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.

    Reply

  • GK avatar

    Posted on Jul 5, 2011 (permalink)

    Thanks Rumen, I got solution in your reply.

    Reply

  • Timothy H McCarrell avatar

    Posted on Mar 15, 2012 (permalink)

    This code works great to re-size the image, but the resulting file size is way bigger than the original file size.  I am re-sizing a .jpg that is 1698x2197 at 401KB down to 800x1035 and the resulting file is 1.00 MB.  How can I keep the resulting file at the same or smaller size as the original?  I have tried all the interpolation modes, and NearestNeighbor produces the smallest output file.  I have tried setting the resolution on the output bitmap to a low value (96x96) but it seems to have no effect on the resulting file size.

    Reply

  • Rumen Rumen admin's avatar

    Posted on Mar 20, 2012 (permalink)

    Hello,

    I think that the Save JPEG image with compression value example provided in the Image.Save Method MSDN article could be helpful for your scenario. The code available in this article is useful as well: http://msdn.microsoft.com/en-us/library/ytz20d80.aspx#Mtps_DropDownFilterText.

    Best regards,
    Rumen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

    Reply

  • Timothy H McCarrell avatar

    Posted on Mar 21, 2012 (permalink)

    Thanks, that is exactly what I needed.

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Editor > Resizing an image during upload