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

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;

}

主要页面源码:source

您可能感兴趣的文章:

  • ASP.NET简单好用功能齐全图片上传工具类(水印、缩略图、裁剪等)
  • ASP.NET实现上传图片并生成缩略图的方法
  • ASP.NET图片上传实例(附源码)
  • asp.net fileupload控件上传图片并预览图片
  • asp.net文件上传解决方案(图片上传、单文件上传、多文件上传、检查文件类型)
  • Asp.Net上传图片同时生成高清晰缩略图
  • asp.net图片上传实例
  • ASP.net WebAPI 上传图片实例
  • 基于asp.net实现图片在线上传并在线裁剪功能

本文由 华域联盟 原创撰写:华域联盟 » Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包)

转载请保留出处和原文链接:https://www.cnhackhy.com/42840.htm

本文来自网络,不代表华域联盟立场,转载请注明出处。

作者: sterben

发表回复

联系我们

联系我们

2551209778

在线咨询: QQ交谈

邮箱: [email protected]

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部