Combine ImageEditor control with...

[Tayonee]

I have a RadGrid which currently allows for uploading an image from the local machine, and after which it displays in the grid. The image itself is stored in the database. Would it be possible to inject the ImageEditor control into this sequence so people could essentially upload their picture - make an edit if necessary - and then have the grid store the edited image to the database as it currently does?

[Dobromir]

Hi Tayonee,

You can load image into the RadImageEditor from the database by handling the editor's ImageLoading event, create new EditableImage from stream and set it as image, e.g.:

void RadImageEditor1_ImageLoading(object sender, ImageEditorLoadingEventArgs args)
{
    //create new EditableImage from stream where stream is System.IO.Stream read from the database
    Telerik.Web.UI.ImageEditor.EditableImage img = new Telerik.Web.UI.ImageEditor.EditableImage(stream);
    args.Image = img;

    args.Cancel = true;
}

You can use the same approach to store the image into the database in the ImageSaving event of RadImageEditor.

Best wishes,
Dobromir
the Telerik team

[Bill Anderson]

I have a similar application where I populate a RadGrid with columns from an SQL database and then use a Web User Control Edit Form to edit and/or insert new items into the Grid/SQL database.

Currently, one of those columns is an SQL Image column which I display as a Rad BinaryImage column in the grid.  I don’t allow editing of the image, but do provide for inserting  a photo using a Rad Upload control on the Web User Control form.

Is it possible (what is the syntax) for populating a Rad Image Editor control on the web user control form, then allowing the user to edit the photo (resize, crop, etc.)… and then (what is the syntax) to update the photo in the Rad Grid/ SQL database.

I currently use code as below for the other columns (text box, combo box, date time picker…) as follows:

1. To populate the edit form user control fields:

<telerik:RadTextBox ID="tbPhotoDescription" runat="server"

Text='<%# DataBinder.Eval(Container, "DataItem.PhotoDescription") %>' MaxLength="255" Rows="3" TextMode="MultiLine" Width="158px" Skin="Forest">

      </telerik:RadTextBox>

1. and in the code behind to retrieve the new values from the web user control:

row("LastName") = CType(MyUserControl.FindControl("tbLastName"), RadTextBox).Text

Thanks in advance.

[Bill Anderson]

I've got most of my app worked out...

but, how do I capture the changed image during the ImageChanged event??

I've tried to capture args.image and save it as an image field, i.e. as Byte()... but I keep getting an error that I cannot convert args.Image to a System.Drawing.Image ?????

[Dobromir]

Hi Bill,

For the time being, you can use the following approach to get the Byte data from the EditableImage object:

EditableImage img = args.Image;
MemoryStream s = new MemoryStream();
img.Image.Save(s, img.RawFormat);
byte[] imgData = s.ToArray();

Regards,
Dobromir
the Telerik team

[Bill Anderson]

Thanks for your help.  When you mention that I can use your suggestion "for the time being..."  Are you planning a change
for the ImageEditor control that I should plan for now or that will adversely impact my application down the road?  Not to pin you down, of course... 
  
As an aside, I played around with it yesterday myself and came up with the code below, using  args.image.image as my changed image source along with some older code   It seemed to work OK as well.

Thanks again for your assistance.

=================================================================================

 

 

Protected Sub RadImageEditor1_ImageChanged(ByVal sender As Object, ByVal args As Telerik.Web.UI.ImageEditorEventArgs) Handles RadImageEditor1.ImageChanged

 

 

 

Dim imgData() As Byte = ImageToByte(args.Image.Image)

 

Session(

 

"imgDataByte") = imgData

 

 

 

End Sub

 

 

 

Public Shared Function ImageToByte(ByVal img As Image) As Byte()

 

 

 

Dim imgStream As MemoryStream = New MemoryStream()

 

img.Save(imgStream, System.Drawing.Imaging.

 

ImageFormat.Png)

 

imgStream.Close()

 

 

Dim byteArray As Byte() = imgStream.ToArray()

 

imgStream.Dispose()

 

 

Return byteArray

 

 

 

End Function
===================================================================================

 

[Dobromir]

Hi Bill,

Please accept my sincere apologies for not being clear enough in my previous reply.

At present, we are working on improvements to the RadImageEditor to provide more easier customizations in the ImageSaving and ImageLoading events. One of these improvements is to provide the image as a byte array out-of-the-box, either as a property or a method of the EditableImage, and the approach provided in my previous reply is more like a workaround.

Best wishes,
Dobromir
the Telerik team

[Andres Calvete]

Hello Telerik Support,

Following your code snippet

void RadImageEditor1_ImageLoading(object sender, ImageEditorLoadingEventArgs args)
{
    //create new EditableImage from stream where stream is System.IO.Stream read from the database
    Telerik.Web.UI.ImageEditor.EditableImage img = new Telerik.Web.UI.ImageEditor.EditableImage(stream);
    args.Image = img;

    args.Cancel = true;
}

I am able to successfully set the EditableImage. However, when executing the line args.Cancel = true; I get the following error:

AccessViolationException was unhandled
Attempted to read or write protected memory. This is often an indication that other memory is corrupt.

and this is the stack trace it provides:

at System.Drawing.SafeNativeMethods.Gdip.GdipSaveImageToStream(HandleRef image, IStream stream, Guid& classId, HandleRef encoderParams)
at System.Drawing.Image.Save(Stream stream, ImageCodecInfo encoder, EncoderParameters encoderParams)
at System.Drawing.Image.Save(Stream stream, ImageFormat format)
at Telerik.Web.UI.ImageEditor.ImageEditorCacheHandler.SendImage(EditableImage editableImage, HttpContext context, String path, String fileName)
at Telerik.Web.UI.ImageEditor.ImageEditorCacheHandler.ProcessRequest(HttpContext context)
at Telerik.Web.UI.HandlerRouter.ProcessHandler(String handlerKey, HttpContext context)
at Telerik.Web.UI.HandlerRouter.ProcessHandler(HttpContext context)
at Telerik.Web.UI.WebResource.ProcessRequest(HttpContext context)
at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)
at System.Web.HttpApplication.ApplicationStepManager.ResumeSteps(Exception error)
at System.Web.HttpApplication.System.Web.IHttpAsyncHandler.BeginProcessRequest(HttpContext context, AsyncCallback cb, Object extraData)
at System.Web.HttpRuntime.ProcessRequestInternal(HttpWorkerRequest wr)
at System.Web.HttpRuntime.ProcessRequestNoDemand(HttpWorkerRequest wr)
at System.Web.HttpRuntime.ProcessRequest(HttpWorkerRequest wr)
at Microsoft.VisualStudio.WebHost.Request.Process()
at Microsoft.VisualStudio.WebHost.Host.ProcessRequest(Connection conn)
at Microsoft.VisualStudio.WebHost.Host.ProcessRequest(Connection conn)
at Microsoft.VisualStudio.WebHost.Server.OnSocketAccept(Object acceptedSocket)
at System.Threading.QueueUserWorkItemCallback.WaitCallback_Context(Object state)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean ignoreSyncCtx)
at System.Threading.QueueUserWorkItemCallback.System.Threading.IThreadPoolWorkItem.ExecuteWorkItem()
at System.Threading.ThreadPoolWorkQueue.Dispatch()
at System.Threading._ThreadPoolWaitCallback.PerformWaitCallback()

Do you have any ideas why I am getting such exception?

Thank you

[Niko]

Hi Andres,

The exception that you are having seems to be caused by the handler that sends the picture to the client. The image is stored correctly on the web server, but for some reason it is not read correctly from there. Unfortunately the error is too generic and it may be caused by numerous circumstances. Therefore I should ask you to open a support ticket and attach a fully runnable sample project there that reproduces the issue, so that we can investigate the case and come up with a solution.

All the best,
Niko
the Telerik team

[Andres Calvete]

Thank you I found the right way to read the byte array.