2016-10-14 233 views
0

我有一个mvc应用程序,我想添加一个照片上传功能。要求是保存原始大小和另一个裁剪为正方形大小的缩略图使用。ASP.NET + jQuery上传图片原始大小+裁剪后的大小

是否可以使用jquery在ui中创建裁剪图像并同时上传原始大小和裁剪图像?我应该从哪里开始实现这一效果?

编辑:我想知道Facebook的如何完成其​​个人资料图片裁剪,其中的原始照片被保存,但资料图片为正方形(原尺寸显示,当你点击图片)

+0

无需上传2个不同的图像。简单的方法是上传原始图像并创建一个新图像并将其保存在服务器上的另一个路径上。你可以在服务器端使用c#来做到这一点。 – user3151766

+0

@ user3151766我想涉及jquery,因为我想添加裁剪功能,以便用户/上传者可以选择照片的哪个部分应该是缩略图 –

+0

查看https://fengyuanchen.github.io/cropperjs/可以强烈推荐。使用客户端进行这种工作可以让您将服务器表格卸载到不必要的工作上,并且允许您的用户自己裁剪以适应将来的功能 –

回答

1

我已经这样做了很长很久以前,在VB.NET,我删除冗余代码,并在这里应该如何看起来像:

HTML部分:

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

这取浏览图像,并且传递给AddToDatabase函数内部控制器

控制器:

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 

控制器需要pictureId和图象本身并将其传递给DbWorks服务类,它做所有的工作

DbWorks类别:

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函数将带有id的图像转换为位图并以300x300分辨率保存,从而在与pictureId相关的系统中创建文件路径。

不要忘记添加System.Drawing库来管理您的图像。

P.S.我非常肯定你正在用c#做你的工作,但它不会花你太多时间来转换它。此外,在这种情况下,你可以避免使用jQuery库。