Asp.net MVC 实现图片剪切上传并在服务器端显示图片

实现图片剪切上传并在服务器端显示图片，可以按照以下步骤进行：

1.在前端页面中，使用 JavaScript 插件实现图片剪切功能，比如 popular 的插件 jCrop。

2.在 Asp.net MVC 中，建立一个控制器，用于处理图片上传和剪切。

3.在控制器中编写代码，接收前端页面中上传的图片，并将其保存在服务器端。

4.使用 C# 的 System.Drawing 命名空间中的类，对保存在服务器端的图片进行剪切处理，并保存剪切后的图片。

5.最后，通过 ViewBag 将剪切后的图片路径传递给前端视图，在前端页面中显示剪切后的图片。

以下是一个简单的示例代码：

前端页面代码：

<div>
    <img id="preview" src="#" alt="选择图片" />
</div>
<div>
    <input type="file" id="image" />
</div>
<div>
    <button id="crop">剪切并上传</button>
</div>

JavaScript 代码：

$(function () {
    var jcrop_api;
    $('#image').change(function () {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result).Jcrop({
                aspectRatio: 1,
                boxWidth: 500,
                boxHeight: 500,
                setSelect: [0, 0, 100, 100],
                onSelect: updateCoords,
                onChange: updateCoords
            }, function () {
                jcrop_api = this;
            });
        }
        reader.readAsDataURL(file);
    });

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

    $('#crop').click(function () {
        var x = $('#x').val();
        var y = $('#y').val();
        var w = $('#w').val();
        var h = $('#h').val();
        var image = $('#preview').attr('src');
        $.ajax({
            type: 'POST',
            url: '/Image/CropAndUpload',
            data: {
                'x': x,
                'y': y,
                'w': w,
                'h': h,
                'image': image
            },
            success: function (data) {
                $('#preview').attr('src', data);
            },
            error: function () {
                alert('剪切并上传失败！');
            }
        });
    });
});

控制器代码：

public class ImageController : Controller
{
    // GET: Image
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult CropAndUpload(string x, string y, string w, string h, string image)
    {
        // 将 base64 编码转为 byte[] 数组
        byte[] bytes = Convert.FromBase64String(image.Split(',')[1]);

        // 将 byte[] 数组转为图片对象
        System.Drawing.Image img = null;
        using (MemoryStream ms = new MemoryStream(bytes))
        {
            img = System.Drawing.Image.FromStream(ms);
        }

        // 对图片进行剪切
        int ix = Convert.ToInt32(x);
        int iy = Convert.ToInt32(y);
        int iw = Convert.ToInt32(w);
        int ih = Convert.ToInt32(h);
        Bitmap bmp = new Bitmap(iw, ih);
        Graphics g = Graphics.FromImage(bmp);
        g.DrawImage(img, new Rectangle(0, 0, iw, ih), new Rectangle(ix, iy, iw, ih), GraphicsUnit.Pixel);

        // 保存剪切后的图片
        string fileName = Guid.NewGuid().ToString() + ".jpg";
        string filePath = Server.MapPath("~/Uploads/" + fileName);
        bmp.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);

        // 返回剪切后的图片路径
        return Json("/Uploads/" + fileName);
    }
}

上述代码中，使用了 jCrop 插件实现图片剪切功能，使用了 System.Drawing 命名空间中的类对图片进行剪切处理，并将剪切后的图片保存在服务器端的 Uploads 文件夹中。最后，将剪切后的图片路径以 JSON 格式返回给前端页面，并在前端页面中显示剪切后的图片。