Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包)

 更新时间:2011年10月19日 22:56:36   作者:  
最近项目中有个图片在线裁剪功能,本人查找资料,方法如下:前台展现用jquery.Jcrop实现,后台使用 System.Drawing.Image类来进行裁剪
1.前台展现实现

网上找到这个jquery.Jcrop,稍看了下,发现它提供的效果完全能满足项目需求.

官方网址:http://deepliquid.com/content/Jcrop.html,感兴趣的朋友可去看看.

页面先引用相关样式和脚本:
复制代码 代码如下:

<link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>

页面body部分代码:
复制代码 代码如下:

<asp:Label ID="Label1" Text="原始图片" runat="server"></asp:Label><br />
<asp:Image ID="target" runat="server" />
<br />
<asp:Label ID="Label2" runat="server" Text="最终显示效果"></asp:Label>
<div id="preImg" style="width: 150px; height: 80px; overflow: hidden;">
<asp:Image ID="preview" alt="Preview" runat="server" />
</div>

其中ID为preImg的Style的width和height的值是裁剪图片的尺寸,而且要定义这个DIV的overflow:hidden.能够及时看到图片的裁剪效果的关键CSS属性就是它了.

接下来讲讲jquery.Jcrop.js的基本用法,及相关javascript的实现.

首先定义一些临时变量,来保存相关参数

var jcrop_api, boundx, boundy;

然后给图片的DOM元素绑定Jcrop功能,相关的方法属性看英文就能明白其中的意思.
复制代码 代码如下:

$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
onRelease: clearCoords,
aspectRatio: 150 / 80,
minSize: _minarray,
setSelect: _array
}, function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
//此方法是用来及时展现图片裁剪效果
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 150 / c.w;
var ry = 80 / c.h;
var _width;
var _height;
if (Math.round(rx * boundx) > $targetImg.width()) {
_width = $targetImg.width();
}
else {
_width = Math.round(rx * boundx);
}
if (Math.round(ry * boundy) > $targetImg.height()) {
_height = $targetImg.height();
}
else {
_height = Math.round(ry * boundy);
}
$('#preview').css({
width: _width + 'px',
height: _height + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#Iwidth').val(c.w);
$('#Iheight').val(c.h);
};

另一部分前台代码:
复制代码 代码如下:

<form id="Form1" runat="server">
<asp:HiddenField ID="HdnNewImgPath" runat="server" />
<asp:HiddenField ID="x1" runat="server" />
<asp:HiddenField ID="y1" runat="server" />
<asp:HiddenField ID="Iwidth" runat="server" />
<asp:HiddenField ID="Iheight" runat="server" />
<br />
<asp:Button ID="SaveImg" runat="server" Text="裁剪并保存图片" OnClick="saveImg" OnClientClick="return CheckIMG()" />
</form>

后台代码的实现:
首先引用相关命名空间
复制代码 代码如下:

using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Design;

保存按钮的方法,从页面取到相关参数,然后调用裁剪方法.
复制代码 代码如下:

protected void saveImg(object sender, EventArgs e)
{
if (IsPostBack)
{
string tempurl = Path.Combine(ConfigAccess.UploadImagePath, _url);
int startX = int.Parse(x1.Value);
int startY = int.Parse(y1.Value);
int width = int.Parse(Iwidth.Value);
int height = int.Parse(Iheight.Value);
ImgReduceCutOut(startX, startY, width, height, tempurl, tempurl);
this.target.Visible = false;
this.Label1.Visible = false;
this.SaveImg.Enabled = false;
}
}

接下是最重要的裁剪方法:
复制代码 代码如下:

//通过连接创建Image对象
System.Drawing.Image oldimage = System.Drawing.Image.FromFile(input_ImgUrl);
oldimage.Save(Server.MapPath("temp.jpg"));//把原图Copy一份出来,然后在temp.jpg上进行裁剪,最后把裁剪后的图片覆盖原图 oldimage.Dispose();//一定要释放临时图片,要不之后的在此图上的操作会报错,原因冲突 Bitmap bm = new Bitmap(Server.MapPath("temp.jpg"));
//处理JPG质量的函数
ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders();
ImageCodecInfo ici = null;
foreach (ImageCodecInfo codec in codecs)
{
if (codec.MimeType == "image/jpeg")
{
ici = codec;
break;
}
}
EncoderParameters ep = new EncoderParameters();
ep.Param[0] = new EncoderParameter(Encoder.Quality, (long)level);
// 裁剪图片
Rectangle cloneRect = new Rectangle(startX, startY, int_Width, int_Height);
PixelFormat format = bm.PixelFormat;
Bitmap cloneBitmap = bm.Clone(cloneRect, format);
if (int_Width > int_Standard_Width)
{
//缩小图片
System.Drawing.Image cutImg = cloneBitmap.GetThumbnailImage(int_Standard_Width, int_Standard_Height, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
cutImg.Save(out_ImgUrl, ici, ep);
cutImg.Dispose();
}
else
{
//保存图片
cloneBitmap.Save(out_ImgUrl, ici, ep);
}
cloneBitmap.Dispose();
bm.Dispose();
}
public bool ThumbnailCallback()
{
return false;
}

主要页面源码:source

相关文章

  • 关于.NET Attribute在数据校验中的应用教程

    关于.NET Attribute在数据校验中的应用教程

    这篇文章主要给大家介绍了关于.NET Attribute在数据校验中的应用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用.NET具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05
  • 扩展方法ToJSON() and ParseJSON()

    扩展方法ToJSON() and ParseJSON()

    AJAX编程经常需要Object<=>JSON之间转换,写了二个扩展方法: public static string ToJSON(this object obj) public static T ParseJSON<T>(this string str)
    2008-03-03
  • .net制作的抽餐厅和游戏装备的小程序

    .net制作的抽餐厅和游戏装备的小程序

    这篇文章主要介绍了.net制作的抽餐厅和游戏装备的小程序,小伙伴们以后再也不用每天都考虑去哪里吃饭了,非常好玩和实用,需要的朋友可以参考下
    2015-03-03
  • asp.net ajax实现无刷新验证码

    asp.net ajax实现无刷新验证码

    实现ajax无刷新验证码首先需要两个aspx页面,第一个用来展示,另一个用来后台刷新验证码
    2011-10-10
  • ASP.NET/C#中如何调用动态链接库DLL

    ASP.NET/C#中如何调用动态链接库DLL

    这篇文章主要为大家详细介绍了ASP.NET/C#中如何调用动态链接库DLL,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • asp.net字符串分割函数使用方法分享

    asp.net字符串分割函数使用方法分享

    这篇文章主要介绍了asp.net字符串分割函数使用方法,需要的朋友可以参考下
    2014-02-02
  • .NET Core中简单的邮箱格式校验方式

    .NET Core中简单的邮箱格式校验方式

    这篇文章主要给大家介绍了关于.NET Core中简单的邮箱格式校验方式的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • google suggest 下拉菜单实现代码(asp.net版本)

    google suggest 下拉菜单实现代码(asp.net版本)

    原来发表过,是asp版本的,但是不支持上下键,现在后台处理程序用.net写的。代码进行部分优化。
    2009-07-07
  • asp.net core razor自定义taghelper的方法

    asp.net core razor自定义taghelper的方法

    这篇文章主要介绍了asp.net core razor自定义taghelper的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • .Net使用日志框架NLog

    .Net使用日志框架NLog

    这篇文章介绍了.Net使用日志框架NLog的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06

最新评论