1、导入文件

　　　Swfupload相关文件

　　　　

　　imgareaselect截取插件相关文件

　　　　

2、前端html代码

　　　　添加一个截取图片的按钮，其他为swf所需的html。

<body>

    <div id="content">

        <div id="swfu_container" style="margin: 0px 10px;">

            <div>

                <span id="spanButtonPlaceholder"></span>

            </div>

            <div id="divFileProgressContainer" style="height: 75px;"></div>

        </div>

    </div>

    <input type="button" value="截取图像" id="imgbtn" />

</body>

3、前端js代码

　　　　使用的jq版本1.7的，我在使用1.10的时候，截图的框不能出来。上传成功后，显示图片，并且调用截取函数。为截取按钮绑定click函数，把宽、高、位置坐标，及路径地址等相关数据提交到后台，后台接受数据，根据这些数据截取图片。

<script type="text/javascript">

        var swfu, select;

        window.onload = function () {

            swfu = new SWFUpload({

                // Backend Settings

                upload_url: "/upload.ashx",

                post_params: {

                    "ASPSESSID": "<%=Session.SessionID %>"

                },

                // File Upload Settings

                file_size_limit: "2 MB",

                file_types: "*.jpg",

                file_types_description: "JPG Images",

                file_upload_limit: 0,    // Zero means unlimited

                // Event Handler Settings - these functions as defined in Handlers.js

                //  The handlers are not part of SWFUpload but are part of my website and control how

                //  my website reacts to the SWFUpload events.

                swfupload_preload_handler: preLoad,

                swfupload_load_failed_handler: loadFailed,

                file_queue_error_handler: fileQueueError,

                file_dialog_complete_handler: fileDialogComplete,

                upload_progress_handler: uploadProgress,

                upload_error_handler: uploadError,

                upload_success_handler: function (file, serverdata) {

                    $("#divFileProgressContainer").text("").css('height', '100%');

                    $("#divFileProgressContainer img").remove();

                    $("#divFileProgressContainer").append("<img id='imgselect' style='width:300px;height:100%;'  src='" + serverdata + "' />");

                    select = $('#imgselect').imgAreaSelect({

                        selectionColor: 'white', x1: 0, y1: 0, x2: 100, y2: 100,

                        maxWidth: 180, minWidth: 180, minHeight: 180, maxHeight: 180,

                        selectionOpacity: 0.2, onSelectEnd: function (img, selection) {

                            $('#imgselect').data('x', selection.x1);

                            $('#imgselect').data('y', selection.y1);

                            $('#imgselect').data('w', selection.width);

                            $('#imgselect').data('h', selection.height);

                        }

                    });

                },

                upload_complete_handler: function () {

                },

                // Button settings

                button_image_url: "/scripts/swfupload/images/XPButtonNoText_160x22.png",

                button_placeholder_id: "spanButtonPlaceholder",

                button_width: 80,

                button_height: 22,

                button_text: '<span class="button">图片上传</span>',

                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',

                button_text_top_padding: 1,

                button_text_left_padding: 5,

                // Flash Settings

                flash_url: "/scripts/swfupload/swfupload.swf",    // Relative to this file

                flash9_url: "/scripts/swfupload/swfupload_FP9.swf",    // Relative to this file

                custom_settings: {

                    upload_target: "divFileProgressContainer"

                },

                // Debug Settings

                debug: false

            });

        }

        $(function () {

            $("#imgbtn").click(function () {

                if (!$('#imgselect').data('w')) {  //用户没有选择  那么按照默认来

                    $('#imgselect').data('x', 0);

                    $('#imgselect').data('y', 0);

                    $('#imgselect').data('w', 100);

                    $('#imgselect').data('h', 100);

                }

                var pic = $('#imgselect').attr('src');

                var x, y, w, h;

                $.post(

                    "/CutImg.ashx",

                    {

                        x: $('#imgselect').data('x'),

                        y: $('#imgselect').data('y'),

                        w: $('#imgselect').data('w'),

                        h: $('#imgselect').data('h'),

                        pic: pic

                    },

                    function (data) {

                        //把裁剪后图片加载到原处

                        if (data) {

                            $('#imgselect').imgAreaSelect({ hide: true });  //截取成功隐藏截取框

                            $('#imgselect').attr('src', data).css('width', '180px').css('height', '180px');

                            alert("截取成功");

                        }

                    });

            });

        });

    </script>

4、上传的后台代码

　　　使用ashx一般处理程序来处理上传图片，以文件的md5值命名图片。保存完成，把图片的相对地址发送到前端。

HttpPostedFile file = context.Request.Files["Filedata"];

            if (file == null)

            {

                context.Response.Write("上传失败");

            }

            else

            {

                string filename = Path.GetFileName(file.FileName);

                string ext = Path.GetExtension(filename);

                filename = MD5Helper.GetStreamMD5(file.InputStream);

                string path = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day +

                              "/";

                Directory.CreateDirectory(context.Server.MapPath(path));

                file.SaveAs(context.Server.MapPath(path + filename + ext));

                context.Response.Write(path + filename + ext);

            }

5、图片截取后台代码

　　　　同样使用一般处理程序来处理，首先取得，用户截取的宽高，位置坐标、图片的相对路径。新建画布、画笔、加载图片。在画布上用画笔，画图片。用大图片的文件名作为小图片的文件名，存放在small文件夹内。最后把小图片的相对地址，返回到前台。

 　　　　　　int x = Convert.ToInt32(context.Request["x"]);

            int y = Convert.ToInt32(context.Request["y"]);

            int width = Convert.ToInt32(context.Request["w"]);

            int height = Convert.ToInt32(context.Request["h"]);

            string path =context.Request["pic"];

            using (Bitmap b=new Bitmap(width,height))

            {

                using (Graphics g=Graphics.FromImage(b))

                {

                    using (Image i = Image.FromFile(context.Server.MapPath(path)))

                    {

                        //1、哪张图片2、画多大 3、从哪里开始画

                        g.DrawImage(i,new Rectangle(,,width,height),new Rectangle(x,y,width,height),GraphicsUnit.Pixel );

                        string bigName = path.Substring(path.LastIndexOf('/')+,path.LastIndexOf('.')--path.LastIndexOf('/'));

                        string pathsmall = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day +

                                      "/"+"small/";

                        Directory.CreateDirectory(context.Server.MapPath(pathsmall));

                        //不能删除大的  会提示正在被访问

                        b.Save(context.Server.MapPath(pathsmall + bigName + ".jpg"));

                        context.Response.Write(pathsmall + bigName + ".jpg");

                    }

                }

            }

SwfUpload及imgareaselect使用方法的更多相关文章

  1. SWFUpload

    引用:http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非 ...

  2. SWFUpload使用指南

    SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大. SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏览器 ...

  3. swfupload 参数说明

    一.配置参数对象中的常用属性及说明 属性 类型 默认值 描述 upload_url String   处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当 ...

  4. swfupload使用说明

    网上的例子介绍的文档真的很多.下面简单介绍一下 SWFUpload的文件上传流程是这样的: 1.引入相应的js文件 2.实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置. 3.点击S ...

  5. SWFUpload（转载）

    网上的例子介绍的文档真的很多.下面简单介绍一下 SWFUpload的文件上传流程是这样的: 1.引入相应的js文件 2.实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置. 3.点击S ...

  6. 文件上传利器SWFUpload使用指南(转)

    http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js ...

  7. 浅谈如何使用swfupload工具与struts2无缝相接

    笔者在网上查找流行的上传组件,swfupload引入眼帘,受到JavaEye的一篇文章启发,历时三天,加以研究,现将心得奉上,献礼JavaEye. 由于笔者才疏学浅,经验匮乏,介绍不深入,仅供菜鸟参考 ...

  8. SWFUpload文件上传详解

    SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大. SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏览器 ...

  9. 【转】SWFUpload使用指南

    原文出自:http://www.runoob.com/w3cnote/swfupload-guide.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大.以前在 ...

随机推荐

  1. 利用js得到某个范围内的整数随机数

    Math.random()方法可以返回(0,1)之间的随机数,不包括0和1. 套用公式:Math.floor(Math.random()*可能的值的总数+第一个可能的值) 如得到(3,9]之间的随机数 ...

  2. part3

    我就不刁旭概念什么的问题了哈~直接进入工作中所通用的一些有关object的方法和属性 1).for/in 属性的遍历~他遍历的对象没有特定的顺序,而且只能枚举出所有用户自定义的属性,不能枚举出某些预定 ...

  3. php读取memcache二进制数据

    memcache作为一个数据中间层,经常用来做数据交换. 比如在某个系统内部我们规定如下的用户状态的信息,每个用户只需要存续52个字节. Key state#ID 如”state#10888” Val ...

  4. 关于Cococs中的CCActionEase（中）

    相比之前的速度正弦变化动作(这个东西叫什么更好一些?渐变动画?)与速度指数级变化动作,CCEaseIn/CCEaseOut/CCEaseInOut更具灵活性.你可以设置运动的速率,甚至是在运动的过程中 ...

  5. Recommending music on Spotify with deep learning 采用深度学习算法为Spotify做基于内容的音乐推荐

    本文参考http://blog.csdn.net/zdy0_2004/article/details/43896015译文以及原文file:///F:/%E6%9C%BA%E5%99%A8%E5%AD ...

  6. WebBrowser执行脚本

    ExecuteJavaScript(WebBrowser:TWebBrowser; Code: string):Variant;var //发送脚本Document:IHTMLDocument2;Wi ...

  7. JavaScript 中的数字和日期类型

    本章节介绍如何掌握Javascript里的数字和日期类型 数字EDIT 在 JavaScript 里面,数字都是双精度浮点类型的 double-precision 64-bit binary form ...

  8. 8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法:

    8.2.1.10 Nested-Loop Join Algorithms 嵌套循环 关联算法: MySQL 执行关联在表之间使用一个嵌套循环算法或者变种 Nested-Loop Join Algori ...

  9. 【HDOJ】1513 Palindrome

    DP,MLE后改为滚动数组AC. #include <cstdio> #include <cstring> #include <cstdlib> #define M ...

  10. 配置Delphi工具菜单 转

    配置Delphi工具菜单 Delphi工具菜单是可配置的.缺省时,Delphi Tools工具菜单的菜单项为[Database Desktop].[Image Editor].[Package Col ...