Edit Image Directly in Image Editor

10 posts, 1 answers
  1. Jim
    Jim avatar
    2 posts
    Member since:
    Nov 2008

    Posted 18 Nov 2008 Link to this post

    Here's what I'm looking to do.  I have a web based app that displayes all available images to be used in a CMS.  A section of which loads directly into a flash slide show.  Some of the images that are uploaded are way too big for the slide show.  So I wanted to be able to give the user the ability to reduce and crop the image directly on the site. 
    Using the RADEditor I am able to click on the image and open the ImageEditor using a dialogopener.
    How can I now load the selected image into the image editor?  It's seems simple, but I can't find any place to put content.  Thanks.
  2. Answer
    Nikolay Raykov
    Nikolay Raykov avatar
    102 posts

    Posted 21 Nov 2008 Link to this post

    Hi Jim,

    Prior to opening the Image Editor, you should make sure that you create an arguments object. Then you can pass it as a parameter to the open() function of the dialog opener. This object should have a property called imageSrc pointing at the url of the image. Here is how this code might look like:

    var args = {}; 
    args.imageSrc = image.src;//setting the url of the image 
    dialogOpener.open("ImageEditor", args); 

    I hope this will help you accomplish your task.

    All the best,
    Nikolay Raykov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft R3 2016 release webinar banner
  4. Mauro Vicentini
    Mauro Vicentini avatar
    1 posts
    Member since:
    Jan 2008

    Posted 05 Feb 2009 Link to this post

    my problem is : "Undefined DialogOpner1"

    <form id="form1" runat="server"
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
      <script type="text/javascript"
        function OpenWindowEdit(elem) 
          var args = {}; 
          args.imageSrc = elem.src; //setting the url of the image 
          DialogOpener1.open("ImageEditor", args);  
    <telerik:dialogopener runat="server" id="DialogOpener1" Skin="Default"></telerik:dialogopener> 
    <img ondblclick="OpenWindowEdit(this);" src="any path" /> 



  5. Tervel
    Tervel avatar
    1337 posts

    Posted 10 Feb 2009 Link to this post

    Hi Mauro,

    The code provided is incomplete. Simply using the server-side name of the server control to access its client-side manifestation is not enough.

    You need to change your code like this:

    var opener = $find("DialogOpener1");

    $find is a standard MS AJAX client-side method for obtaining a reference to a (client) control.
    It expects the client-side ID of the control, so one better way to go is like this:

    var opener = $find("<%=DialogOpener1.ClientID %>");

    Best wishes,
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 18 Feb 2009 Link to this post

    Hi guys,

    I've spent some time searching for this, and now successfully implemented it.
    Once the user saves the image, I want to save some related info to a DB, how would I go about that?

    Some side questions if you don't mind:

    1) Is it possible to allow users only the ability to scale images down, instead of allowing them to make them larger as well?
    2) How can I get rid of the additional "_thumb" string that's automatically added to any image in the Image Editor?
    3) Can you please point out some good Image Editor Resources, I'm having some trouble finding any real info on it.

  7. Lini
    Lini avatar
    2144 posts

    Posted 24 Feb 2009 Link to this post


    If you want to execute code when an image is saved, you can create a custom content provider, which inherits from the default FileSystemContentProvider class and override the StoreBitmap() method. This method is called when an image is saved from the image editor dialog. You will need to set the content provider in the dialog parameters(image dialog parameters) to point to your custom provider. You can change the "_thumb" suffix from there as well.

    For the third question - limiting the size of the edited image, I don't think that there is a supported way of doing that. You will need to create a custom copy of the Image Editor dialog (get the EditorDialogs/ImageEditor.ascx file from the RadControls distribution) using the ExternalDialogsPath property. We have a demo of a custom dialog available here - http://demos.telerik.com/aspnet-ajax/editor/examples/externaldialogspath/defaultcs.aspx.

    Here is an example image dialog definition with the above properties:

    ImageManagerDialogParameters dialogParams = new ImageManagerDialogParameters(); 
    dialogParams.ImageEditorFileSuffix = "suffix"
    dialogParams.FileBrowserContentProviderTypeName = typeof(yourCustomProvider).AssemblyQualifiedName; 
    dialogParams["ExternalDialogsPath"] = ExternalDialogsPath; 
    DialogDefinition def = new DialogDefinition(typeof(ImageManagerDialog), dialogParams); 

    You can also look at the following blog post, which shows how to create a simple image editor using the editor server API - http://blogs.telerik.com/tervelpeykov/posts/08-10-23/A_quick_but_not_so_dirty_Image_Editor_using_the_public_RadEditor_ImageEditing_API.aspx

    Sincerely yours,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 26 Feb 2009 Link to this post

    Hi Lini,

    Thanks for the help. I'm desperately trying to avoid using a custom content provider, and it seems I'll get away with it. I've managed to implement most of the desired functionality for my project.

    I would like to suggest the "only scale down images and no option to make them larger" feature for the following reasons:
    1. The only thing that happens when you scale images up is the loss of quality
    2. If users can make something larger they will, since larger means better in modern society.

    For those who are using the ImageEditor as a standalone feature in their projects, here is a little nugget.
    Once you have edited the image, and the editor is closed, it's desirable to refresh the original image to confirm the changes for the user.

    You can use Ajax Manager to achieve this:

       <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" onajaxrequest="RadAjaxManager1_AjaxRequest">  
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
                       <telerik:AjaxUpdatedControl ControlID="imgImage" />  

    Protected Sub RadAjaxManager1_AjaxRequest(ByVal s As ObjectByVal e As Telerik.Web.UI.AjaxRequestEventArgs) 
        Dim strImgUrl As String = imgImage.ImageUrl 
        Dim theRand As New Random 
        Dim intRand As Integer = theRand.Next() 
        imgImage.ImageUrl = strImgUrl & "?=" & intRand 
    End Sub 

    A random number is assigned as a querystring to the image to force a refresh. One problem remains, if the user wants to re-edit the image the ImageEditor can't find it / will always save a new copy once you have added the querystring.

    Just add a label or a textbox to the form and set the text to the original imageurl and then modify the opener javascript accordingly:

      <script type="text/javascript"
          function OpenWindowEdit(elem) { 
              var args = {}; 
              //args.imageSrc = elem.src; //setting the url of the image 
              args.imageSrc = "<%=txtImgUrl.Text %>"
              var opener = $find("<%=DialogOpener1.ClientID %>"); 
              opener.open("ImageEditor", args); 


  9. Premnath
    Premnath avatar
    5 posts
    Member since:
    Dec 2008

    Posted 04 Mar 2009 Link to this post

    I am using the code from the below link
    to edit the image directly. In that the image not save its showing the error

    The error message is can't write in the target folder.

    The folder path is showing in the save as text box is http://localhost/testingradimageeditor/Images/Pets_thumb.jpg

    Please let me know result for this isssue as quick as possible
  10. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 04 Mar 2009 Link to this post

    Hi Premnath,

    Sounds like a permission error, have you made sure all needed accounts have writing permission on that folder?

  11. Premnath
    Premnath avatar
    5 posts
    Member since:
    Dec 2008

    Posted 04 Mar 2009 Link to this post

    Hi i gave all the permission to the folder but its still giving the same error message. Can u please help me i need the solution as quick as possible.
Back to Top
DevCraft R3 2016 release webinar banner