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

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;
}

主要页面源码: