This is a migrated thread and some comments may be shown as answers.

Load image, resize and save automatically

5 Answers 592 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 24 Nov 2014, 07:11 PM
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?

5 Answers, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 27 Nov 2014, 09:46 AM
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.

 
0
Derek
Top achievements
Rank 1
answered on 30 Nov 2014, 08:30 PM
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.
0
Vessy
Telerik team
answered on 03 Dec 2014, 04:29 PM
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.

 
0
RJ
Top achievements
Rank 1
answered on 02 Sep 2016, 02:22 PM

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

 

 

 

0
RJ
Top achievements
Rank 1
answered on 02 Sep 2016, 05:16 PM

Got it.

Thanks anyways.

Tags
ImageEditor
Asked by
Derek
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Derek
Top achievements
Rank 1
RJ
Top achievements
Rank 1
Share this question
or