教程集 > 脚本编程 > Asp.net > 正文 ASP.NET MVC4使用JCrop裁剪图片并上传的例子

ASP.NET MVC4使用JCrop裁剪图片并上传的例子

发布时间：2016-11-27 编辑：jiaochengji.com

教程集为您提供ASP.NET MVC4使用JCrop裁剪图片并上传的例子等资源，欢迎您收藏本站，我们将为您提供最新的ASP.NET MVC4使用JCrop裁剪图片并上传的例子资源

JCrop是一款非常不错的jquery图片裁剪插件了，今天我们就来介绍使用JCrop结合asp.net来实现图片裁剪的例子。

引用下载好的css和js文件

异步的话还需要引用jquery.form.js文件

布局

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5157')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5157>
<div role="tabpanel" class="tab-pane" id="div_headportrait">
     @using (Ajax.BeginForm("EditUserHeadPortrait", "Account", null, new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data", id = "form_headportrait" }))
      {
            @Html.AntiForgeryToken()
            @Html.HiddenFor(m => m.HeadPortraitData, new { id = "imgData" })
            @Html.Hidden("imgX")
            @Html.Hidden("imgY")
            @Html.Hidden("imgW")
            @Html.Hidden("imgH")
             <div class="form-horizontal">
                    <div class="form-group">
                       <div class="col-lg-3">当前头像</div>
                        <div class="col-lg-5">
                              <div>设置新头像</div>
                                  <div>支持jpg、jpeg、gif、png或者bmp格式，可以在大照片中裁剪满意的部分。</div>
                                     <div id="btnBrowserPic">选择</div> 
                                  </div>
                                    <div class="col-lg-3">预览头像</div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-3">
                                        <img alt="当前头像" id="imgCurrent" style="width: 100px; height: 100px;" @(string.IsNullOrEmpty(Model.HeadPortraitUrl) ? "" : "src=data:image/bmp;base64," Model.HeadPortraitData "") />
                                    </div>
                                    <div class="col-lg-5 div-origin" style="height:300px;height:300px;">
                                        <img id="imgOrigin" style="max-width:300px;max-height:300px;" />
                                    </div>
                                    <div class="col-lg-3">
                                        <div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
                                            <img id="imgCropped" style="max-width:300px;max-height:300px;" />
                                        </div>
                                    </div>
                                </div>
                     <div class="form-group text-center">
                          <input type="button" value="保存" id="btn_save" class="btn btn-primary" />
                   </div>
          </div>
     }
</div>
</td></tr></table>

js代码

</td></tr></table>

FileUpload控制器

public class FileUploadController : Controller
    {
        // GET: FileUpload
        [HttpPost]
        public ActionResult UploadImage(HttpPostedFileBase imgFile, int? resizeWidth, int? resizeHeight)
        {
            JsonObject jsonObj = new JsonObject();
            if (imgFile != null && imgFile.ContentLength != 0)
            {
                try
                {
                    jsonObj.Data = ImageHelper.ResizeImage(imgFile.InputStream, resizeWidth.Value, resizeHeight.Value);
                    jsonObj.Status = true;
                    jsonObj.Message = "successful";
                }
                catch (Exception)
                {
                    jsonObj.Message = "fail";
                }
            }
            return Json(jsonObj, JsonRequestBehavior.AllowGet);
        }
    }

</td></tr></table>

图片处理类

    /// <summary>
    /// 图片处理
    /// </summary>
    public static class ImageHelper
    {
        public static string CropImage(byte[] content, int x, int y, int cropWidth, int cropHeight)
        {
            using (MemoryStream stream = new MemoryStream(content))
            {
                return CropImage(stream, x, y, cropWidth, cropHeight);
            }
        }
        public static string CropImage(Stream content, int x, int y, int cropWidth, int cropHeight)
        {
            using (Bitmap sourceBitmap = new Bitmap(content))
            {
                // 将选择好的图片缩放
                Bitmap bitSource = new Bitmap(sourceBitmap, sourceBitmap.Width, sourceBitmap.Height);
                Rectangle cropRect = new Rectangle(x, y, cropWidth, cropHeight);
                using (Bitmap newBitMap = new Bitmap(cropWidth, cropHeight))
                {
                    newBitMap.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution);
                    using (Graphics g = Graphics.FromImage(newBitMap))
                    {
                        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                        g.SmoothingMode = SmoothingMode.HighQuality;
                        g.PixelOffsetMode = PixelOffsetMode.HighQuality;
                        g.CompositingQuality = CompositingQuality.HighQuality;
                        g.DrawImage(bitSource, new Rectangle(0, 0, newBitMap.Width, newBitMap.Height), cropRect, GraphicsUnit.Pixel);
                        return GetBitmapBytes(newBitMap);
                    }
                }
            }
        }
        public static string GetBitmapBytes(Bitmap source)
        {
            ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4];
            EncoderParameters parameters = new EncoderParameters(1);
            parameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
            using (MemoryStream tmpStream = new MemoryStream())
            {
                source.Save(tmpStream, codec, parameters);
                byte[] data = new byte[tmpStream.Length];
                tmpStream.Seek(0, SeekOrigin.Begin);
                tmpStream.Read(data, 0, (int)tmpStream.Length);
                string result = Convert.ToBase64String(data);
                return result;
            }
        }
        /// <summary>
        /// 图片转换Base64
        /// </summary>
        /// <param name="urlOrPath">图片网络地址或本地路径</param>
        /// <returns></returns>
        public static string ImageToBase64(string urlOrPath)
        {
            try
            {
                if (urlOrPath.Contains("http"))
                {
                    Uri url = new Uri(urlOrPath);
                    using (var webClient = new WebClient())
                    {
                        var imgData = webClient.DownloadData(url);
                        using (var ms = new MemoryStream(imgData))
                        {
                            byte[] data = new byte[ms.Length];
                            ms.Seek(0, SeekOrigin.Begin);
                            ms.Read(data, 0, Convert.ToInt32(ms.Length));
                            string netImage = Convert.ToBase64String(data);
                            return netImage;
                        }
                    }
                }
                else
                {
                    FileStream fileStream = new FileStream(urlOrPath, FileMode.Open);
                    Stream stream = fileStream as Stream;
                    byte[] data = new byte[stream.Length];
                    stream.Seek(0, SeekOrigin.Begin);
                    stream.Read(data, 0, Convert.ToInt32(stream.Length));
                    string netImage = Convert.ToBase64String(data);
                    return netImage;
                }
            }
            catch (Exception)
            {
                return null;
            }

        }
        /// <summary>
        /// 按比例缩放图片
        /// </summary>
        /// <param name="content"></param>
        /// <param name="resizeWidth"></param>
        /// <returns></returns>
        public static string ResizeImage(Stream content, int resizeWidth, int resizeHeight)
        {
            using (Bitmap sourceBitmap = new Bitmap(content))
            {
                int width = sourceBitmap.Width,
                    height = sourceBitmap.Height;
                if (height > resizeHeight || width > resizeWidth)
                {
                    if ((width * resizeHeight) > (height * resizeWidth))
                    {
                        resizeHeight = (resizeWidth * height) / width;
                    }
                    else
                    {
                        resizeWidth = (width * resizeHeight) / height;
                    }
                }
                else
                {
                    resizeWidth = width;
                    resizeHeight = height;
                }
                // 将选择好的图片缩放
                Bitmap bitSource = new Bitmap(sourceBitmap, resizeWidth, resizeHeight);
                bitSource.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution);
                using (MemoryStream stream = new MemoryStream())
                {
                    bitSource.Save(stream, ImageFormat.Jpeg);
                    byte[] data = new byte[stream.Length];
                    stream.Seek(0, SeekOrigin.Begin);
                    stream.Read(data, 0, Convert.ToInt32(stream.Length));
                    string newImage = Convert.ToBase64String(data);
                    return newImage;
                }
            }
        }
    }

</td></tr></table>

效果图

您可能感兴趣的文章：
jQuery图片裁剪插件 Jcrop
php gd库实现服务端图片裁剪与缩略图
 jQuery图片剪裁插件 Jcrop
jQuery jcrop插件截图使用方法
 jcrop基本参数一览
 JQuery Jcrop 实现图片裁剪的插件
 jQuery 图像裁剪插件Jcrop的简单使用
 PHP图片裁剪函数(图像不变形)
PHP tclip扩展调用opencv从内存中读取及解析图片数据的问题
 ASP.NET MVC4使用JCrop裁剪图片并上传的例子

上一篇：实例:asp.net中GridView实现分页功能下一篇：asp.net echart ajax实现柱状图/线状图实例

[关闭]

ASP.NET MVC4使用JCrop裁剪图片并上传的例子

最近更新

浏览排行