图片裁剪上传

样式基于bootstrap，

前端代码：

<div class="panel panel-default panel-col lesson-manage-panel">

        <div class="panel-heading">
            课程图片
        </div>
        <div class="panel-body">


            <div id="upload">
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-8 controls controls">
                        <img src="/Content/Image/avatar.jpg_lg.jpg?datetime=@DateTime.Now" style="max-width:100%; height: auto;display: block;">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-md-offset-2 col-md-8 controls">
                        <p class="help-block">你可以上传JPG、GIF或PNG格式的文件，文件大小不能超过<strong>1M</strong>。</p>
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-md-offset-2 col-md-8 controls">
                        <button class="btn btn-success" id="upload-image-btn">上传新图片</button>
                    </div>
                </div>
            </div>


            <div id="crop" style="display:none">
                <div class="form-group" style="overflow:hidden;">
                    <div class="col-sm-6">
                        <img id="modelimage" style=" height:400px" />
                        <div class="help-block">提示：请选择图片裁剪区域。</div>
                    </div>
                    <div class="col-sm-6">
                        <h3 class="page-header">裁剪后图像</h3>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="preview"></div>
                            </div>
                            <div class="col-sm-4">
                                <div class="preview"></div>
                            </div>
                            <div class="col-sm-2">
                                <div class="preview"></div>
                            </div>
                        </div>
                    </div>
                </div>


                <form id="image-crop-form" method="post" action="@Url.Action("CropLogo")">
                    <input type="hidden" name="left" id="cropx" value="0" />
                    <input type="hidden" name="top" id="cropy" value="0" />
                    <input type="hidden" name="width" id="cropw" value="0" />
                    <input type="hidden" name="height" id="croph" value="0" />
                    <div class="form-group clearfix">
                        <div class="col-md-offset-2 col-md-8 controls">
                            <button type="submit" class="btn btn-fat btn-primary">保存</button>
                            <a href="javascript:;" id="upload_again" class="go-back btn btn-link">重新选择图片</a>
                        </div>
                    </div>


                </form>
            </div>


        </div>
    </div> 
        <script src="/Scripts/plupload/plupload.full.min.js"></script>
        <link href="~/Scripts/cropper/cropper.min.css" rel="stylesheet" />
        <script src="~/Scripts/cropper/cropper.js"></script>
        <script>
            $(function () {


               
                    var url='@Html.Raw(@Url.Action("UploadLogo"))';


                    var uploader = new plupload.Uploader({
                        browse_button: 'upload-image-btn',
                        url: url,
                        flash_swf_url: '/Scripts/plupload/Moxie.swf',
                        silverlight_xap_url: '/Scripts/plupload/Moxie.xap',
                        filters: {
                            mime_types: [
                            { title: "图片文件", extensions: "jpg,jpeg,gif,png,bmp" }
                            ],
                            max_file_size: '1mb',
                            prevent_duplicates: false //不允许队列中存在重复文件
                        },
                        multi_selection: false,
                        auto_start: true
                    });
                    uploader.bind('FilesAdded', function (uploader, files) {
                        uploader.start();
                    });
                    uploader.bind('UploadFile', function (uploader, file) {
                        uploader.disableBrowse(true);
                    });
                    uploader.bind('FileUploaded', function (uploader, file, responseObject) {
                        var data = $.parseJSON(responseObject.response);
                        if (data.result) {
                            var now = new Date();
                            $('#upload').hide();
                            $('#crop').show();
                            $('#modelimage').attr('src', data.Url + "?img=" + now.getMilliseconds());
                            $('#modelimage').cropper('replace', data.Url + "?img=" + now.getMilliseconds());
                        } else {
                            alert('上传失败. ' + data.msg);
                        }
                    });
                    uploader.bind('Error', function (uploader, errObject) {
                        alert(errObject.message + ' ' + errObject.code);
                    });
                    uploader.bind('UploadComplete', function (uploader, files) {
                        uploader.disableBrowse(false);
                    });
                    uploader.init();
                
                var $previews = $('.preview');
                $('#modelimage').cropper({
                    aspectRatio: 19 / 9,
                    autoCropArea: 0.5,
                    build: function (e) {
                        var $clone = $(this).clone();
                        $clone.css({
                            display: 'block',
                            width: '100%',
                            minWidth: 0,
                            minHeight: 0,
                            maxWidth: 'none',
                            maxHeight: 'none'
                        });
                        $previews.css({
                            width: '100%',
                            overflow: 'hidden'
                        }).html($clone);
                    },
                    crop: function (e) {
                        var copdata = $("#modelimage").cropper('getData');
                        $('#cropx').val(copdata.x);
                        $('#cropy').val(copdata.y);
                        $('#cropw').val(copdata.width);
                        $('#croph').val(copdata.height);
                        var imageData = $(this).cropper('getImageData');
                        var previewAspectRatio = e.width / e.height;
                        $previews.each(function () {
                            var $preview = $(this);
                            var previewWidth = $preview.width();
                            var previewHeight = previewWidth / previewAspectRatio;
                            var imageScaledRatio = e.width / previewWidth;
                            $preview.height(previewHeight).find('img').css({
                                width: imageData.naturalWidth / imageScaledRatio,
                                height: imageData.naturalHeight / imageScaledRatio,
                                marginLeft: -e.x / imageScaledRatio,
                                marginTop: -e.y / imageScaledRatio
                            });
                        });
                    }
                });
                $("#upload_again").click(function(){
                    $("#upload-image-btn").click();
                })


            });

        </script>

后端代码：

public ActionResult Logo()
{
return View();
}
public ActionResult UploadLogo(HttpPostedFileBase file)
{
if (file == null)
{
return Json(new { result = false });
}
//保存图片路径
string path = "/Content/Image/";
//获取完整路径
string savePath = Server.MapPath(path);
//没路径就创建
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
string[] imgType = { ".jpg", ".jpeg", ".gif", ".png", ".bmp" };
if (!imgType.Contains(Path.GetExtension(file.FileName)))
{
return Json(new { result = false, msg = "文件格式不对！" });
}
try
{
//保存图片
file.SaveAs(savePath + "avatarupload.jpg");
}
catch (Exception e)
{
return Json(new { result = false, msg = e.Message });
}
return Json(new { result = true, Url = path + "avatarupload.jpg" });
}
public ActionResult CropLogo(float left, float top, float width = 0, float height = 0)
{
// 读取原图
string virtualPath = "/Content/Image/avatarupload.jpg";
string rawPath = Server.MapPath(virtualPath);
string savePath = Path.GetDirectoryName(rawPath);
string avatarpath = Path.Combine(savePath, "avatar.jpg");
using (Image raw = Image.FromFile(rawPath))
{
if (width == 0 || height == 0)
{
width = raw.Width;
height = raw.Height;
}
// 裁剪缩放
using (Bitmap avatar = new Bitmap(320, 180))
{


using (var g = Graphics.FromImage(avatar))
{
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;


g.DrawImage(raw, new Rectangle(0, 0, avatar.Width, avatar.Height), left, top, width, height, GraphicsUnit.Pixel);
}


// 另存
avatar.Save(avatarpath, ImageFormat.Jpeg);
}


// 裁剪大图
using (Bitmap avatar = new Bitmap(480, 270))
{
using (var g = Graphics.FromImage(avatar))
{
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;


g.DrawImage(raw, new Rectangle(0, 0, avatar.Width, avatar.Height), left, top, width, height, GraphicsUnit.Pixel);
}


// 另存
avatar.Save(avatarpath + "_lg.jpg", ImageFormat.Jpeg);
}


// 裁剪小图
using (Bitmap avatar = new Bitmap(160, 90))
{


using (var g = Graphics.FromImage(avatar))
{
g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;


g.DrawImage(raw, new Rectangle(0, 0, avatar.Width, avatar.Height), left, top, width, height, GraphicsUnit.Pixel);
}


// 另存
avatar.Save(avatarpath + "_sm.jpg", ImageFormat.Jpeg);
}
}


return RedirectToAction("Logo");
}