ASP.NET + jQuery Bild hochladen Originalgröße + Freigestellte Größe

Question

Ich habe eine mvc-Anwendung und möchte eine Foto-Upload-Funktion hinzufügen. Die Anforderung besteht darin, die Originalgröße zu speichern, und eine andere, die für die Verwendung von Miniaturbildern auf die Quadratgröße zugeschnitten ist.

Ist es möglich, ein gecropptes Bild mit jQuery im ui zu erstellen und gleichzeitig die Originalgröße und das zugeschnittene Bild hochzuladen? Wo sollte ich anfangen, diesen Effekt zu erreichen?

EDIT: Ich möchte wissen, wie Facebook seine Profilbild beschneiden tut, wo das ursprüngliche Foto gespeichert ist, aber das Profilbild ist quadratisch (die Originalgröße zeigt, wenn Sie auf das Foto klicken)

Answer 1

Ich habe dies getan, um eine lange Zeit vor in VB.NET, ich entfernt redundanten Code und hier, wie es aussehen soll:

HTML-Teil:

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

diese nimmt das geblättert Bild und geht auf die AddToDatabase Funktion innerhalb Regler

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 pictureid und Bild selbst nehmen und übergeben sie an DBWorks Service-Klasse, die die ganze Arbeit

DBWorks Klasse:

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 

Die Funktion SaveAndResize nimmt das Bild mit der ID und wandelt es in eine Bitmap um. Es wird in einer Auflösung von 300x300 gespeichert, wodurch ein Pfad zu Ihrer Datei in dem System erstellt wird, das mit einer PictureId verknüpft ist.

Vergessen Sie nicht, System.Drawing-Bibliothek hinzuzufügen, um mit Ihrem Image zu verwalten.

P.S. Ich bin mir ziemlich sicher, dass du deine Arbeit in C# machst, aber es wird nicht viel Zeit brauchen, um sie zu transformieren. In diesem Fall können Sie auch die Verwendung der jquery-Bibliothek vermeiden.