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

时间: 2024-10-02 17:40:41

Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包)_实用技巧的相关文章

一个Asp.Net的显示分页方法 附加实体转换和存储过程 带源码下载_实用技巧

之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnetpager写了一个精简实用的返回分页显示的html方法,其他话不说了,直接上代码.分页显示信息的实体类: 复制代码 代码如下: public class Pager    {        private string _firstPageText;        /// <summary>   

asp.net MVC利用自定义ModelBinder过滤关键字的方法(附demo源码下载)_实用技巧

本文实例讲述了MVC利用自定义ModelBinder过滤关键字的方法.分享给大家供大家参考,具体如下: 前面一篇主要讲解了如何利用ActionFilter过滤关键字,这篇主要讲解如何利用自己打造的ModelBinder来过滤关键字. 首先,我们还是利用上一篇<asp.net MVC利用ActionFilterAttribute过滤关键字的方法>中的实体类,但是我们需要加上DataType特性,以便于我们构造的ModelBinder通过DataTypeName识别出来: using System

ASP.NET MVC使用ActionFilterAttribute实现权限限制的方法(附demo源码下载)_实用技巧

本文实例讲述了ASP.NET MVC使用ActionFilterAttribute实现权限限制的方法.分享给大家供大家参考,具体如下: ActionFilterAttribute是Action过滤类,该属于会在执行一个action之前先执行.而ActionFilterAttribute是 MVC的一个专门处理action过滤的类.基于这个原理 我们做一个权限限制 例如:如何访问 HomeController  里的test  action using System; using System.C

ASP.NET图片上传实例(附源码)_实用技巧

由于需要图片上传的功能,所以花了一些时间网上找相关资料终于搞定,效果图如下: 下面的是解决方案截图和上传的图片截图: 下面是代码:1.界面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadPic.aspx.cs" Inherits="Pic_Try.UploadPic" %> <!DOCTYPE html PUBLIC &qu

ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统之前端页面框架构建源码分享_实用技巧

开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用户的体验已经需要越来越注重,这次我们是左右分栏,左边是系统菜单,右边是一个以tabs页组成的页面集合,每一个tab都可以单独刷新和关闭,因为他们会是一个iframe 工欲善其事必先利其器.需要用到以下工具. Visual Studio 2012 您可以安装MVC4 for vs2010用VS2010来开发,但是貌似你将不能使用EF5.0将会是EF4.4版本,但这没有多大的关系. MVC4将挂载在.NET Framework4.5上. 好

ASP.NET验证码实现(附源码)_实用技巧

首先看下效果实现(由于gif屏幕录制软件是即时找的,有些失祯) 代码主要就是绘制验证码类的实现 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Drawing; using System.IO; namespace SecurityCodePic { public class DrawingSecurityCode { /// <summary>

Asp.net实现直接在浏览器预览Word、Excel、PDF、Txt文件(附源码)_实用技巧

1.功能说明 输入文件路径,在浏览器输出文件预览信息,经测试360极速(Chrome).IE9/10.Firefox通过 2.分类文件及代码说明 DemoFiles 存放可测试文件 Default.aspx  启动页 ExcelPreview.cs  Excel预览类 public static void Priview(System.Web.UI.Page p, string inFilePath, string outDirPath = "") { Microsoft.Office

基于ASP.NET+easyUI框架实现图片上传功能(判断格式+即时浏览 )_实用技巧

基于ASP.Net +easyUI框架上传图片,判断格式+实现即时浏览,具体内容如下 <div> 选择图片:<input id="idFile" style="width:224px" runat="server" name="pic" onchange="javascript:setImagePreview(this,localImag,preview);" type="fil

Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)_实用技巧

本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial