Load image, resize and save automatically

6 posts, 1 answers
  1. Derek
    Derek avatar
    118 posts
    Member since:
    Oct 2008

    Posted 24 Nov 2014 Link to this post

    Here's the scenario;

    We'd like to allow the user to select an image, upload it. Once uploaded, we'd like to look at the dimensions and resize it so that the maximum dimension (either height or width) is 1000 px, and then save it as a stream into a database column. We don't want the user to have any additional editing capability with the image.

    Wondering whether the RadImageEditor is the appropriate tool for this? We're trying to avoid using other libraries such as the system.graphics library.

    Any suggestions?
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 27 Nov 2014 Link to this post

    Hello Derek,

    If the only action that will be made by the end user is uploading of images, you can use the RadAsyncUpload control and then resize the uploaded image through the EditableImage class. For example:
    public void UploadButton_Click(object sender, EventArgs e)
    {
        foreach (UploadedFile file in this.theAsyncUpload.UploadedFiles)
        {
            EditableImage editableImage = new EditableImage(file.InputStream);
            editableImage.Resize(60, 56);
     
            using (var stream = new MemoryStream())
            {
                editableImage.Image.Save(stream, ImageFormat.Png);
                Page.Form.Controls.Add(new RadBinaryImage() { DataValue = stream.ToArray() });
            }
        }
    }

    I am attaching a very sample page demonstrating this approach so you can use it as a base for your implementation. Hope this helps.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Derek
    Derek avatar
    118 posts
    Member since:
    Oct 2008

    Posted 30 Nov 2014 in reply to Vessy Link to this post

    This is great, thanks.

    Wondering how can we write the uploaded (and modified) image to the table directly? We have a column defined in the underlying SQL Server table as image, which Data Access interprets as byte. The intent is to scale the image appropriately, write it to the database, and then reload the page.
  5. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 03 Dec 2014 Link to this post

    Hi Derek,

    You can save the resized uploaded image to a database just by converting its stream to byte array in a standard way:
    foreach (UploadedFile file in this.theAsyncUpload.UploadedFiles)
    {
        EditableImage editableImage = new EditableImage(file.InputStream);
        editableImage.Resize(60, 56);
     
        using (var stream = new MemoryStream())
        {
            editableImage.Image.Save(stream, ImageFormat.Png);
             
            byte[] imgData = stream.ToArray();
            //your DB saving logic here, e.g
        }
    }

    Once you do it, you can implement the desired data-base saving logic using the imgData array.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 02 Sep in reply to Vessy Link to this post

    Hi Derek,

    Do you have sample of this but saving it on a folder?

    How can I detect the actual size of the image, for instance if the image is 800px by 800px and will just resize it to 50%?

    The reduction of size is based on how large the file is (Will be having several conditions for this item).

    Can you have it on vb code.

     

    Thanks in advance,

    RJ

     

     

     

  7. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 02 Sep in reply to RJ Link to this post

    Got it.

    Thanks anyways.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017