现在位置首页 / 前端开发 /正文

图片剪裁插件CropZoom+asp.net完整使用说明demo-原理篇

作者: IT小兵 | 2016年4月7日| 热度:℃ | 评论: |参与:

在[用JQuery仿造QQ头像裁剪功能]中,本站已经分享了图片剪裁插件。本篇分享一下:图片剪裁插件CropZoom+asp.net完整使用说明demo。

首先介绍一下强大的CropZoom

1、介绍

CropZoom是由Gaston Robledo写的一个功能非常强大的jquery图片裁剪插件,它具有以下主要特性:

1、任意放大和缩小图片

2、360度旋转照片

3、自由拖动,自定义选择区样式

4、及时显示裁剪后的照片,可以与后台程序PHP、JAVA、Asp.net等通信

5、兼容IE6+,fireFox2+,Opera,Safria

官方地址:https://github.com/cropzoom/cropzoom 大家可以在官方下载最新的代码。

注意:代码需要运行在web server上才能裁剪图片。php、java/asp.net都需要。

今天我专门想一下asp.net的代码。先看效果图。我修改了一下样式。

先说明一下CropZoom的截图原理,或者说是所有的js实现的截图使用的原理。

首先要知道js是不能实现截图的,它没有那么大的权限,html5可以。如果说是纯js实现截图,那就都是假的。

截图实现都在服务端实现的,不管是php/java/.net。通过js获取截图数据,然后传递截图数据到服务器端,然后根据参数实现图片的裁剪。


下面这些参数就是需要传递给服务器端的:

 int ID = Convert.ToInt32(context.Request["ID"]);
        float imageH = float.Parse(context.Request["imageH"]);
        float imageW = float.Parse(context.Request["imageW"]);
        float angle = float.Parse(context.Request["imageRotate"]);
        string img_source = context.Request["imageSource"];
        float imageX = float.Parse(context.Request["imageX"]);
        float imageY = float.Parse(context.Request["imageY"]);
        float selectorH = float.Parse(context.Request["selectorH"]);
        float selectorW = float.Parse(context.Request["selectorW"]);
        float selectorX = float.Parse(context.Request["selectorX"]);
        float selectorY = float.Parse(context.Request["selectorY"]);
        float viewPortH = float.Parse(context.Request["viewPortH"]);
        float viewPortW = float.Parse(context.Request["viewPortW"]);

服务端根据参数进行图片处理,并返回给客户端。

        //To Values
        float pWidth = imageW;
        float pHeight = imageH;
        Bitmap img = null;
        string serverImagePath =
                Kaitone.PathAnalysis.Common.Common.GetAppSettings("imagepath");
        if (img_source.IndexOf(serverImagePath) >= 0)   //本站的上传图片
        {
            string urlall = img_source.ToString();
            string[] argslist = urlall.Split('/');
            if (argslist.Length > 3)
            {
               
                string imagename = argslist[argslist.Length - 1];
                string shopid = argslist[argslist.Length - 2];
                string shopimagepath = serverImagePath + "/" + shopid;
                if (!string.IsNullOrEmpty(shopimagepath)&&
                 File.Exists(shopimagepath + "/" + imagename)
                 )
                {
                    img = (Bitmap)Bitmap.FromFile(shopimagepath + "/" + imagename);
                }
            }
        }
        else      if (img_source.IndexOf("http") >= 0)   //  网络图片
        {
            WebClient client = new WebClient();
            byte[] htmlData = null;
            htmlData = client.DownloadData(img_source);
            MemoryStream mstream = new MemoryStream(htmlData);
            img = (Bitmap)Bitmap.FromStream(mstream);
        }
        else{                     //直接是本地路径
           img= (Bitmap)Bitmap.FromFile(context.Server.MapPath(img_source));
        }
     
        
        //Original Values
        int _width = img.Width;
        int _height = img.Height;
        //Resize
        Bitmap image_p = ResizeImage(img, Convert.ToInt32(pWidth), Convert.ToInt32(pHeight));
        int widthR = image_p.Width;
        int heightR = image_p.Height;
        //Rotate if angle is not 0.00 or 360
        if (angle > 0.0F && angle < 360.00F)
        {
            image_p = (Bitmap)RotateImage(image_p, (double)angle);
            pWidth = image_p.Width;
            pHeight = image_p.Height;
        }
        //Calculate Coords of the Image into the ViewPort
        float src_x = 0;
        float dst_x = 0;
        float src_y = 0;
        float dst_y = 0;
        if (pWidth > viewPortW)
        {
            src_x = (float)Math.Abs(imageX - Math.Abs((imageW - pWidth) / 2));
            dst_x = 0;
        }
        else
        {
            src_x = 0;
            dst_x = (float)(imageX + ((imageW - pWidth) / 2));
        }
        if (pHeight > viewPortH)
        {
            src_y = (float)Math.Abs(imageY - Math.Abs((imageH - pHeight) / 2));
            dst_y = 0;
        }
        else
        {
            src_y = 0;
            dst_y = (float)(imageY + ((imageH - pHeight) / 2));
        }
        //Get Image viewed into the ViewPort
        image_p = ImageCopy(image_p, dst_x, dst_y, src_x, src_y, viewPortW, viewPortH, pWidth, pHeight);
        //image_p.Save(context.Server.MapPath("test_viewport.jpg"));
        //Get Selector Portion
        image_p = ImageCopy(image_p, 0, 0, selectorX, selectorY, selectorW, selectorH, viewPortW, viewPortH);
        string FileName = String.Format("test{0}.jpg", DateTime.Now.Ticks.ToString());
        image_p.Save(context.Server.MapPath("../crop/tmp/"+FileName));
        image_p.Dispose();
        img.Dispose();
        //imgSelector.Dispose();
        context.htm = htm&(Kaitone.PathAnalysis.Common.Common.GetAppSettings("ImageWebSite") +"crop/tmp/" + FileName);
    }
    private Bitmap ImageCopy(Bitmap srcBitmap, float dst_x, float dst_y, float src_x, float src_y, float dst_width, float dst_height, float src_width, float src_height)
    {
        // Create the new bitmap and associated graphics object
        RectangleF SourceRec = new RectangleF(src_x, src_y, dst_width, dst_height);
        RectangleF DestRec = new RectangleF(dst_x, dst_y, dst_width, dst_height);
        Bitmap bmp = new Bitmap(Convert.ToInt32(dst_width), Convert.ToInt32(dst_height));
        Graphics g = Graphics.FromImage(bmp);
        // Draw the specified section of the source bitmap to the new one
        g.DrawImage(srcBitmap, DestRec, SourceRec, GraphicsUnit.Pixel);
        // Clean up
        g.Dispose();
        // Return the bitmap
        return bmp;
    }

参数说明:

CropZoom插件主要参数和方法一览表

参数/方法描述默认值

width整个图片容器的宽度640

Height整个图片容器的高度480

bgColor容器的背景色#000

overlayColor当拖动选区(选择区域)时容器的背景色#000

enableRotationtrue/false,是否显示角度调节控件true

enableZoomtrue/false,是否显示缩放控件true

restore方法,重置、复位图片和插件参数 

send方法,向服务端发送裁剪图片的数据,以便服务端接收参数进行处理,

e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); }); 

选区参数

width选区的宽度229

height选区的高度100

borderColor选区边框的颜色yellow

borderColorHover当鼠标滑向选区时,选区边框的颜色red

Centered是否将选区居中,即显示在容器的中心。false

图片参数

source图片的路径 

rotation图片的初始角度0

width图片的宽度0

height图片的高度0

minZoom图片的最小缩放率(百分比)10

maxZoom图片的最大缩放率(百分比)150


下一篇直接发demo的代码。

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询