Edit Image Directly in Image Editor

[Jim]

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.

[Nikolay Raykov]

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.

[Flavio Righetto]

Hello,
my problem is : "Undefined DialogOpner1"

<form id="form1" runat="server">
  <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
  </telerik:RadScriptManager>

<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);
    }
  </script>
</telerik:RadCodeBlock>
<telerik:dialogopener runat="server" id="DialogOpener1" Skin="Default"></telerik:dialogopener>

<img ondblclick="OpenWindowEdit(this);" src="any path" />
</form>

Thanks

Mauro

[Tervel]

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");
alert(opener);

$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,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[-DJ-]

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.

Regards,
-DJ-

[Lini]

Hi,

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,
Lini
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.

[-DJ-]

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:

aspx

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

VB

Protected Sub RadAjaxManager1_AjaxRequest(ByVal s As Object, ByVal 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:

JS

  <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);
      }
  </script>

Regards,
-DJ-

[Premnath]

I am using the code from the below link
http://www.telerik.com/community/forums/aspnet-ajax/editor/edit-image-directly-in-image-editor.aspx
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

[-DJ-]

Hi Premnath,

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

Regards,
-DJ-

[Premnath]

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.