Asp.Net平台下的图片在线裁剪功能的实现

最新推荐文章于 2017-12-27 08:10:09 发布
最新推荐文章于 2017-12-27 08:10:09 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： ASP.NET 文章标签： asp.net 平台 server asp string codec
 

最近项目中有个图片在线裁剪功能,本人查找资料,方法如下:前台展现用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

 
 
 
总代码： 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Design;

namespace CutImage
{
    public partial class PicView : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string picName = "http_imgload.jpg";
            string picPath =  "/UploadFiles/" + picName;
            target.ImageUrl = picPath;
            preview.ImageUrl = picPath;
        }

        protected void saveImg(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                string[] urls = target.ImageUrl.Split('/');
                string _url = urls.Last();

                string tempurl = Path.Combine(Server.MapPath("~/UploadFiles/"), _url);
                int startX = int.Parse(x1.Text);
                int startY = int.Parse(y1.Text);
                int width = int.Parse(Iwidth.Text);
                int height = int.Parse(Iheight.Text);
                ImgReduceCutOut(startX, startY, width, height, tempurl, tempurl);
            }
           
        }

      
        /// <summary>
        /// 缩小裁剪图片
        /// </summary>
        /// <param name="int_Width">要缩小裁剪图片宽度</param>
        /// <param name="int_Height">要缩小裁剪图片长度</param>
        /// <param name="input_ImgUrl">要处理图片路径</param>
        /// <param name="out_ImgUrl">处理完毕图片路径</param>
        public void ImgReduceCutOut(int startX,int startY,int int_Width, int int_Height, string input_ImgUrl, string out_ImgUrl)
        {
            // ＝＝＝上传标准图大小＝＝＝
            int int_Standard_Width = 120;
            int int_Standard_Height = 120;

            int Reduce_Width = 0; // 缩小的宽度
            int Reduce_Height = 0; // 缩小的高度
            int CutOut_Width = 0; // 裁剪的宽度
            int CutOut_Height = 0; // 裁剪的高度
            int level = 100; //缩略图的质量 1-100的范围

            // ＝＝＝获得缩小，裁剪大小＝＝＝
            if (int_Standard_Height * int_Width / int_Standard_Width > int_Height)
            {
                Reduce_Width = int_Width;
                Reduce_Height = int_Standard_Height * int_Width / int_Standard_Width;
                CutOut_Width = int_Width;
                CutOut_Height = int_Height;
            }
            else if (int_Standard_Height * int_Width / int_Standard_Width < int_Height)
            {
                Reduce_Width = int_Standard_Width * int_Height / int_Standard_Height;
                Reduce_Height = int_Height;
                CutOut_Width = int_Width;
                CutOut_Height = int_Height;
            }
            else
            {
                Reduce_Width = int_Width;
                Reduce_Height = int_Height;
                CutOut_Width = int_Width;
                CutOut_Height = int_Height;
            }

            // ＝＝＝通过连接创建Image对象＝＝＝
            System.Drawing.Image oldimage = System.Drawing.Image.FromFile(input_ImgUrl);
            oldimage.Save( Server.MapPath("tepm.jpg"));
            oldimage.Dispose();

             ＝＝＝缩小图片＝＝＝
            //System.Drawing.Image thumbnailImage = oldimage.GetThumbnailImage(Reduce_Width, Reduce_Height, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
            Bitmap bm = new Bitmap(Server.MapPath("tepm.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, CutOut_Width, CutOut_Height);
            PixelFormat format = bm.PixelFormat;
            Bitmap cloneBitmap = bm.Clone(cloneRect, format);

            // ＝＝＝保存图片＝＝＝
           cloneBitmap.Save(out_ImgUrl, ici, ep);
           bm.Dispose();

        }

        public bool ThumbnailCallback()
        {
            return false;
        }

    }
}

zhanzkw
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于asp.net实现图片在线上传并在线裁剪功能
10-20
本文主要介绍了基于asp.net实现图片在线上传并在线裁剪功能的具体事例代码，具有一定的参考价值。需要的朋友可以参考下
使用asp.net上传图片并且裁剪的方法
weixin_34087307的博客
01-06 196
工欲善其事，必先利其器，坚持才能更好 这篇文章主要是强调怎么使用asp.net上传图片并且能够裁剪，这个功能主要使用在注册信息的时候需要上传头像并且图片格式很大的时候能够把图片裁剪成更小的图片。下面来看一下具体的实现过程。 第一步，首先利用vs创建一个webform页面。 第二步，在uploadimg.aspx中加入一个upload控件，一个上传按钮，一个显示图片的控件，一个重置按钮，一...
Asp.net中裁剪，缩小图片
gjlwangqiuyi的专栏
05-24 511
private void Page_Load(object sender, System.EventArgs e)        {            ImgReduceCutOut(100,120,"1.jpg","2.jpg");        }        ///         /// 缩小裁剪图片        ///         /// 要缩小裁剪图片宽度        /
ASP.NET 你肯定会用到的图片裁剪功能，可按长度或宽度裁剪，也能绘制一个更大图...
weixin_30439131的博客
04-28 128
以下包括3个功能， 1.按照长度裁剪 2.按照宽度裁剪 3.不用裁剪，直接生成一张大图，把原图包含进去 以上功能不会影响图片质量，这个也是一个亮点 public class UploadPicCut { /// <summary> /// 计算图片大小 /// </summary> /// &lt...
asp.net图片裁剪
weixin_30572613的博客
08-05 111
Today, I’m going to show you how to combine jQuery, jCrop, and ImageResizing.Net to create an AJAX cropping interface – in 11 lines of javascript. This produces true, cropped images that you can use...
一个基于C#+ASP.NET实现的图片裁剪Image Cropping 处理控件代码
10-02
一个基于C#+ASP.NET实现的图片裁剪 image cropping 处理控件代码。
asp.net 图片裁切
Carryontilltomorrow的专栏
12-05 1041
//图片路径             String oldPath = Server.MapPath("/111.jpg");             //新图片路径             String newPath = System.IO.Path.GetExtension(oldPath);             //设置截取的坐标和大小             int x =
asp.net图片切割、裁切并实现保存
05-04
这是个与AJAX有关的很不错的实用小程序，ASP.NET+JavaScript实现图片切割， 也就是大家所说的裁切功能，并可以用鼠标拖动区域、拉大区域， 右侧会适时显示出裁切后的图片， 点击保存后可将图片按原来的文件名保存， 值得大家学习的好程序。
js+asp.net裁剪图片并上传的例子
12-19
解决上传图片需要裁剪的功能。 js+asp.net。 js解决裁剪问题， 此例子跟C#完美结合，实现美图裁剪上传功能。
在线图片编辑器 asp.net版，
03-13
该程序为由picself ApI而来，主要是修改图片接收页面由php改为aspx. 实现了asp.net环境下在线编辑图片并保存服务器。
asp.net实现图片在线上传并在线裁剪
技术资料收集站
12-27 513
1、说明 　　接上一篇文章uploadify实现多附件上传完成后，又突然用到头像上传并在线裁剪。在网上找个众多例子都没有符合要求的，有一篇文章写的不错，就是文旺老兄写的这篇Asp.Net平台下的图片在线裁剪功能的实现，大家可以看一下，写的真不错。我就是在参考了他的代码下，结合uploadify使用一般处理程序实现了这个功能，写下了这篇在asp.net实现图片在线上传并在线裁剪，有点绕口哈，废
ASP.NET 图片上传工具类 upload image简单好用功能齐全
weixin_33736832的博客
05-28 151
使用方法： UploadImage ui = new UploadImage(); /***可选参数***/ ui.SetWordWater = "哈哈";//文字水印 // ui.SetPicWater = Server.MapPath("2.png");//图片水印(图片和文字都赋值图片有效) ...
.net 裁剪图片（不压缩）
swjian1997的博客
12-20 1019
命名空间： using System.Drawing; using System.Drawing.Imaging; /// &lt;summary&gt; /// 生成图片缩略文件 /// &lt;/summary&gt; /// &lt;param name="originalImage"&gt;图片源文...
asp.net 在线图片裁剪
记录、分享
06-04 1233
asp.net网站在线图片裁剪1。下载地址 : http://webcropimage.codeplex.com/2。同时在上面还下载了demo程序，但是这个demo程序在ie 8下无法运行的，没有办法，只能google了。google asp.net web crop image control ie8，得到 ： http://cemsisman.com/asp-net-web-crop-image-control/Doesn’t seem to work in IE8. Am I missing som
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值