Combine ImageEditor control with...

10 posts, 0 answers
  1. Tayonee
    Tayonee avatar
    52 posts
    Member since:
    Nov 2006

    Posted 25 Jul 2011 Link to this post

    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?
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 27 Jul 2011 Link to this post

    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

    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bill Anderson
    Bill Anderson avatar
    6 posts
    Member since:
    Feb 2010

    Posted 27 Jul 2011 Link to this post

    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.

  5. Bill Anderson
    Bill Anderson avatar
    6 posts
    Member since:
    Feb 2010

    Posted 29 Jul 2011 Link to this post

    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 ?????



  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 02 Aug 2011 Link to this post

    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

    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.

  7. Bill Anderson
    Bill Anderson avatar
    6 posts
    Member since:
    Feb 2010

    Posted 02 Aug 2011 Link to this post

    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
    ===================================================================================


     

  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Aug 2011 Link to this post

    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

    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.

  9. Andres Calvete
    Andres Calvete avatar
    9 posts
    Member since:
    Nov 2009

    Posted 25 Aug 2011 Link to this post

    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
  10. Niko
    Admin
    Niko avatar
    387 posts

    Posted 29 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  11. Andres Calvete
    Andres Calvete avatar
    9 posts
    Member since:
    Nov 2009

    Posted 02 Sep 2011 Link to this post

    Thank you I found the right way to read the byte array.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017