结合jquery插件实现头像裁剪

最新推荐文章于 2021-12-29 20:49:19 发布

lulu_jiang

最新推荐文章于 2021-12-29 20:49:19 发布

阅读量3.5k

点赞数

分类专栏： C# ASP.NET 文章标签： jquery插件 string class stylesheet button image

本文链接：https://blog.csdn.net/lulu_jiang/article/details/5388904

版权

C# ASP.NET 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

准备工作

包含进要使用的jquery插件imgareaSelect

页面代码html

页面样式：

#image_info{margin-top:30px;border:1px solid #CCCCCC;}

.clear{font-size:0px;width:0px;height:0px;line-height:0px;visibilty:hidden;clear:both;}
</style>

页面javascript
<script type="text/javascript">
var photoW;
var photoH;

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 150 / selection.width;
    var scaleY = 150 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * photoW),
        height: Math.round(scaleY * photoH),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#sw').val(selection.width);
    $('#sh').val(selection.height);
}

$(function () {
$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
fadeSpeed: 200, onSelectChange: preview });
});
</script>

<body>
    <form id="form1" runat="server">
    <div id="image_main">
  <div id="image_left">
      <div class="photoBorder">
       <img id="photo" src="upload/tempPhoto/66.jpg" alt="当前头像" />
   </div>
   <br class="clear" />
  </div>

  <script type="text/javascript">
  photoW = document.getElementById("photo").width;
  photoH = document.getElementById("photo").height;
  </script>

     <div id="preview" class="photoBorder">
      <img src="upload/tempPhoto/66.jpg" alt="头像预览" />
    </div>

  <br class="clear" />
  <br class="clear" />
    </div>

<div id="image_info">
<table>
<tr>
<td>x1:</td>
<td><input id="x1" name="x1" type="text" value="0" /></td>
</tr>
<tr>
<td>y1:</td>
<td><input id="y1" name="y1" type="text" value="0" /></td>
</tr>
<tr>
<td>x2:</td>
<td><input id="x2" name="x2" type="text" value="0" /></td>
</tr>
<tr>
<td>y2:</td>
<td><input id="y2" name="y2" type="text" value="0" /></td>
</tr>
<tr>
<td>selectWidth:</td>
<td><input id="sw" name="sw" type="text" value="0" /></td>
</tr>
<tr>
<td>selectHeight:</td>
<td><input id="sh" name="sh" type="text" value="0" /></td>
</tr>
<tr>
<td>pWidth:</td>
<td><input id="pw" name="pw" type="text" value="0" /></td>
</tr>
<tr>
<td>pHeight:</td>
<td><input id="ph" name="ph" type="text" value="0" /></td>
</tr>
</table>

</div>

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="保存头像" />

</form>
</body>

后台code

{

double x1 = Convert.ToDouble(Request.Form["x1"]);
double y1 = Convert.ToDouble(Request.Form["y1"]);
double sw = Convert.ToDouble(Request.Form["sw"]);
double sh = Convert.ToDouble(Request.Form["sh"]);

double pw = Convert.ToDouble(Request.Form["pw"]);

string sourcePath = @"upload/tempPhoto/66.jpg";
string savePath = @"upload/Photo/lulu/a.jpg";

selectSavePic sp = new selectSavePic(x1, y1, sw, sh, pw);

Response.Write(sp.savePic(150,sourcePath,savePath,"jpg"));

}

自定义图片裁剪类

using System;
using System.Web;
using System.Drawing;

namespace picProcess
{
    /// <summary>
    /// selectSavePic 的摘要说明
    /// </summary>
    public class selectSavePic
    {
        #region 定义成员变量
        protected double _x1;
        protected double _y1;
        protected double _sw;
        protected double _sh;
        protected double _pw;

        /// <summary>
        /// 原图片按比例缩放后要截取的起始x轴位置
        /// </summary>
        protected double x1
        {
            set { _x1 = value; }
            get { return _x1; }
        }
        /// <summary>
        /// 原图片按比例缩放后要截取的起始y轴位置
        /// </summary>
        protected double y1
        {
            set { _y1 = value; }
            get { return _y1; }
        }
        /// <summary>
        /// 选取框的宽度
        /// </summary>
        protected double sw
        {
            set { _sw = value; }
            get { return _sw; }
        }
        /// <summary>
        /// 选取框的高度
        /// </summary>
        protected double sh
        {
            set { _sh = value; }
            get { return _sh; }
        }
        /// <summary>
        /// 原图片按比例缩放后的宽度,用以计算图片缩放比例
        /// </summary>
        protected double pw
        {
            set { _pw = value; }
            get { return _pw; }
        }
        #endregion

        #region 构造函数
        /// <summary>
        /// 构造函数
        /// </summary>
        /// <param name="x1">原图片按比例缩放后要截取的起始x轴位置</param>
        /// <param name="y1">原图片按比例缩放后要截取的起始y轴位置</param>
        /// <param name="sw">选取框的宽度</param>
        /// <param name="sh">选取框的高度</param>
        /// <param name="pw">原图片按比例缩放后的宽度,用以计算图片缩放比例</param>
        public selectSavePic(double x1,double y1,double sw,double sh,double pw)
        {
            //
            // TODO: 在此处添加构造函数逻辑
            //
            this.x1 = x1;
            this.y1 = y1;
            this.sw = sw;
            this.sh = sh;
            this.pw = pw;
        }
        #endregion

        #region 保存截取的图片
        /// <summary>
        /// 保存截取的图片
        /// </summary>
        /// <param name="picSize">裁剪后保存图片的高宽,此处仅考虑高=宽</param>
        /// <param name="sourcePath">原图片保存路径</param>
        /// <param name="savePath">裁剪后图片保存路径</param>
        /// <param name="saveType">裁剪后图片保存类型</param>
        /// <returns>返回string类型,"true"为保存成功,否则返回错误信息</returns>
        public string savePic(int picSize,string sourcePath,string savePath,string saveType)
        {
            try
            {
                Bitmap source = new Bitmap(HttpContext.Current.Server.MapPath(sourcePath));

//原图片的实际宽度
double wSource = source.Width;

                //用户并未选取部分头像
                if (Convert.ToInt32(sw) <= 0 || Convert.ToInt32(sh) <= 0)
                {
                    x1 = 0.0;
                    y1 = 0.0;
                    sw = wSource;
                    sh = source.Height;

                    /*if (sw <= sh)
                    {
                        sh = sw;
                    }
                    else
                    {

                    }*/
                }
                else
                {
                    //计算图片缩放比例
                    double rate = Convert.ToDouble(wSource) / Convert.ToDouble(pw);

                    x1 = x1 * rate;
                    y1 = y1 * rate;
                    sw = sw * rate;
                    sh = sh * rate;
                }

Bitmap target = new Bitmap(picSize, picSize);

                Graphics g = Graphics.FromImage(target);
                Rectangle destRect = new Rectangle(0, 0, picSize, picSize);
                Rectangle srcRect = new Rectangle(Convert.ToInt32(x1), Convert.ToInt32(y1), Convert.ToInt32(sw), Convert.ToInt32(sh));

GraphicsUnit units = GraphicsUnit.Pixel;
g.DrawImage(source, destRect, srcRect, units);

                switch (saveType.ToLower())
                {
                    case "jpg":
                        target.Save(HttpContext.Current.Server.MapPath(savePath), System.Drawing.Imaging.ImageFormat.Jpeg);
                        break;
                    case "jpeg":
                        target.Save(HttpContext.Current.Server.MapPath(savePath), System.Drawing.Imaging.ImageFormat.Jpeg);
                        break;
                    case "bmp":
                        target.Save(HttpContext.Current.Server.MapPath(savePath), System.Drawing.Imaging.ImageFormat.Bmp);
                        break;
                    case "gif":
                        target.Save(HttpContext.Current.Server.MapPath(savePath), System.Drawing.Imaging.ImageFormat.Gif);
                        break;
                    case "png":
                        target.Save(HttpContext.Current.Server.MapPath(savePath), System.Drawing.Imaging.ImageFormat.Png);
                        break;
                    default:
                        target.Save(HttpContext.Current.Server.MapPath(savePath), System.Drawing.Imaging.ImageFormat.Jpeg);
                        break;
                }

                g.Dispose();
                source.Dispose();
                target.Dispose();

                //保存截取图片成功,返回"true"
                return("true");
            }
            catch(Exception e)
            {
                //出现异常,返回异常信息
                return(e.Message);
            }
        }
        #endregion
    }
}