asp.net mvc 在服务器端将图片预览裁剪并上传

你可以使用 jQuery插件jCrop来对图片进行预览和裁剪，然后使用 ASP.NET MVC的文件上传功能将裁剪后的图片上传到服务器。

以下是大致的实现步骤：

1. 在视图中引入 jCrop 插件和 jQuery 库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script>

2. 在视图中显示待裁剪的图片：

<img src="path/to/image" id="crop-image" />

3. 使用 jCrop 插件初始化图片裁剪：

<script>
$(function () {
    $('#crop-image').Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords
    });
});

function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
</script>

4. 添加表单元素用于提交裁剪的坐标：

<form method="post" action="Upload" enctype="multipart/form-data">
    <input type="hidden" name="x" id="x" />
    <input type="hidden" name="y" id="y" />
    <input type="hidden" name="w" id="w" />
    <input type="hidden" name="h" id="h" />
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
</form>

5. 在控制器中实现文件上传和图片裁剪：

[HttpPost]
public ActionResult Upload(HttpPostedFileBase file, int x, int y, int w, int h)
{
    if (file != null && file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var filePath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
        var img = Image.FromStream(file.InputStream);

        // 裁剪图片
        var croppedImg = new Bitmap(w, h);
        var g = Graphics.FromImage(croppedImg);
        g.DrawImage(img, new Rectangle(0, 0, croppedImg.Width, croppedImg.Height), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
        croppedImg.Save(filePath);

        return RedirectToAction("Index");
    }
    return View();
}

这样就可以在 ASP.NET MVC 中实现图片预览、裁剪和上传了。