ASP.NET + jQuery Upload Image Original Size + Cropped Size

Question

I have an mvc application and I would like to add a photo upload functionality. The requirement is to save the original size and another one which is cropped to square size for thumbnail use.

Is it possible to create a cropped image in the ui using jquery and upload both the original size and the cropped image simultaneously? Where I should start to achieve this effect?

EDIT: I want to know how facebook does its profile picture cropping where the original photo is saved but the profile picture is square (the original size shows when you click the photo)

No need to upload 2 different images.Simple way would be to upload the original image and create a new image and save it on another path on server. You can do this using c# on server side. — Rahul Jain
– Rahul Jain, Commented Oct 14, 2016 at 6:22
@user3151766 I want to involve jquery because I want to add a cropping functionality so the user/uploader can select which part of the photo should be the thumbnail — super-user
– super-user, Commented Oct 14, 2016 at 6:39
taking a look at fengyuanchen.github.io/cropperjs can be strongly recommended. Using the client for this kind of work allows you to offload your server form needless work, aswell as allowing for future feature if you want your user to do the cropping on their own — Thomas Andreè Wang
– Thomas Andreè Wang, Commented Oct 14, 2016 at 7:02

Coke · Accepted Answer · 2016-10-14 06:58:35Z

I have done this a long time ago in VB.NET, I removed redundant code and here how it should look like:

HTML part:

<form action="AddToDatabase" method="post" enctype="multipart/form-data">
<input type="id" name="pictureId"/> <br/>
<input type="file" name="picture" accept="image/gif, image/jpeg" required/> <br/>
<input type="submit" value="Upload" />
</form>

This takes the browsed image and passes to the AddToDatabase function inside Controller

Controller:

Public Class HomeController
Public Function AddToDatabase(ByVal pictureId as Long, ByVal picture As HttpPostedFileBase) 
Dim manager As New DbWorks
Dim result = manager.SaveAndResize(pictureId, picture)
Return Content(result)
End Class

Controller takes pictureId and picture itself and passes it to DbWorks Service class, which does all the work

DbWorks Class:

    Public Class DbWorks 
    Public Function SaveAndResize(ByVal picturetId As Long, ByVal picture As HttpPostedFileBase) As String
    Dim picSource As Image = Image.FromStream(picture.InputStream)
    Dim bmSource As New Bitmap(picSource)
    Dim bmDest As New Bitmap(300, 300) //Saves in 300x300 resolution
    Dim grDest As Graphics = Graphics.FromImage(bmDest)
    grDest.DrawImage(bmSource, 0, 0, bmDest.Width, bmDest.Height)
    Dim picDest As Image = bmDest
    picDest.Save(HttpContext.Current.Server.MapPath("~/Pictures/" + CStr(pictureId) + ".jpeg"))
    Dim path = ("~/Pictures/" + CStr(pictureId) + ".jpeg")
    Return path
    End Function
    End Class

SaveAndResize function takes the image with id and transforms it into bitmap and saves in 300x300 resolution creating a path to your file in the system associated with a pictureId.

Don't forget to add System.Drawing library to manage with your image.

P.S. I am pretty sure you are doing your work in c#, but it won't take you much time to transform it. Also, in this case you can avoid using jquery library.

Collectives™ on Stack Overflow

ASP.NET + jQuery Upload Image Original Size + Cropped Size

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related