Load image, resize and save automatically

[Derek]

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?

[Vessy]

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

 

 

[Derek]

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.

[Vessy]

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

 

 

[RJ]

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

 

 

 

[RJ]

Got it.

Thanks anyways.