步步为营-87-imageAreaSelect插件使用(图片剪切)

1 引用文件

jquery.imgareaselect.min.cs

imgareaselect-default.js

2 代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUpload_Demo.aspx.cs" Inherits="BookShop.Web.Test.SWFUpload_Demo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="../../js/jquery-1.7.1.js"></script>

    <script src="../handlers.js"></script>

    <script src="../swfupload.js"></script>

    <script src="../../js/jquery.imgareaselect.min.js"></script>

    <link href="../../Css/imgareaselect-default.css" rel="stylesheet" />

    <script type="text/javascript">

        var swfu;

        window.onload = function () {

            swfu = new SWFUpload({

                //指定要上传的路径

                upload_url: "/ashx/FileUpload.ashx?action=upload",

                async: true,

                post_params: {

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

                },

                // File Upload Settings

                file_size_limit: "2 MB",

                file_types: "*.jpg;*.gif",

                file_types_description: "JPG Images",

                file_upload_limit: ,    // Zero means unlimited

                // 事件处理了的三个主要方法定义在 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: showImage,

                upload_complete_handler: uploadComplete,

                // 按钮设置

                button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",

                button_placeholder_id: "spanButtonPlaceholder",

                button_width: ,

                button_height: ,

                button_text: '<span class="button">请选择上传图片<span class="buttonSmall">(2 MB Max)</span></span>',

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

                button_text_top_padding: ,

                button_text_left_padding: ,

                // Flash Settings

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

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

                custom_settings: {

                    upload_target: "divFileProgressContainer"

                },

                // Debug Settings

                debug: false

            });

        }

        //上传成功以后调用该方法

        function showImage(file, serverData) {

            var data = serverData.split(':');

            //将上传成功的图片作为div的背景

            console.log(data[]);

            $("#selectbanner").attr("src", data[]);

            $('#selectbanner').imgAreaSelect({

                selectionColor: 'blue', x1: , y1: , x2: ,

                y2: , selectionOpacity: 0.2, onSelectEnd: preview

            });

        };

        //选择结束以后调用该方法

        function preview(img, selection) {

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

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

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

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

        };

        //裁剪确认操作

        $(function () {

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

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

                var x, y, w, h;

                $.post(

                 "/ashx/FileUpload.ashx",

                 {

                     "x": $('#selectbanner').data('x'),

                     "y": $('#selectbanner').data('y'),

                     "w": $('#selectbanner').data('w'),

                     "h": $('#selectbanner').data('h'),

                     "pic": pic,

                     "action": "cut",

                 },

                function (data) {

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

                    $('#selectbanner').attr("src", data);

                }

                )

                //var pars = {

                //    "x": $('#selectbanner').data('x'),

                //    "y": $('#selectbanner').data('y'),

                //    "w": $('#selectbanner').data('w'),

                //    "h": $('#selectbanner').data('h'),

                //    "action": "cut",

                //    "pic": $("#selectbanner").attr("src")

                //};

                //$.post("/ashx/FileUpload.ashx", pars, function (data) {

                //    $("#showPhoto").attr("src",data);

                //});

            });

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <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 id="thumbnails"></div>

                <input type="button" value="截取图片" id="btnCut" />

                <img id="selectbanner" />

                <img id="showPhoto" />

            </div>

        </div>

    </form>

</body>

</html>

前台

using BookShopManager.Web.Common;

using System;

using System.Collections.Generic;

using System.Drawing;

using System.IO;

using System.Linq;

using System.Web;

namespace BookShopManager.Web.Ashx

{

    /// <summary>

    /// FileUpload 的摘要说明

    /// </summary>

    public class FileUpload : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string action = context.Request["action"];

            if (action == "upload")

            {

                ProcessFileUpload(context);//图片上传

            }

            else if (action == "cut")

            {

                ProcessCutPhoto(context);//截取图片

            }

            else

            {

                context.Response.Write("参数错误");

            }

        }

        private static void ProcessFileUpload(HttpContext context)

        {

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

            if (file != null)

            {

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

                string fileExt = Path.GetExtension(fileName);

                if (fileExt == ".jpg")

                {

                    string dir = "/FileUpload/" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + "/";

                    if (!Directory.Exists(context.Request.MapPath(dir)))

                    {

                        Directory.CreateDirectory(context.Request.MapPath(dir));

                    }

                    string newFileName = Guid.NewGuid().ToString();

                    string fullDir = dir + newFileName + fileExt;

                    file.SaveAs(context.Request.MapPath(fullDir));

                    context.Response.Write(fullDir);

                }

            }

        }

        private void ProcessCutPhoto(HttpContext context)

        {

            int x = ConvertHelper.ToInt(context.Request["x"]);

            int y = ConvertHelper.ToInt(context.Request["y"]);

            int w = ConvertHelper.ToInt(context.Request["w"]);

            int h = ConvertHelper.ToInt(context.Request["h"]);

            string imgSrc = context.Request["pic"];//获取上传成功的图片路径

            using (Bitmap map = new Bitmap(w, h))

            {

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

                {

                    using (Image img = Image.FromFile(context.Request.MapPath(imgSrc)))

                    {

                        g.DrawImage(img, new Rectangle(, , w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);

                        string newFileName = Guid.NewGuid().ToString();

                        string fullDir = "/FileUpload/" + newFileName + ".jpg";

                        map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg);

                        context.Response.Write(fullDir);

                    }

                }

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

后台

3 示例

步步为营-87-imageAreaSelect插件使用(图片剪切)的更多相关文章

图片剪切之Croppic插件
前几天做图片上传时需要进行图片的剪切和缩放,上网查找时找到了这个插件.样式很好看,功能也很OK.但是网上都是php进行后台处理图片的例子,然后只好慢慢琢磨C#的处理.插件地址是:http://www. ...
php imagemagick 处理图片剪切、压缩、合并、插入文本、背景色透明
php有一款插件叫做imagemagick,功能很强大,提供了图片的很多操作,图片剪切.压缩.合并.插入文本.背景色透明等.并且有api方法调用和命令行操作两种方式,如果只是简单处理的话建议api方法 ...
iOS开发UI篇—Quartz2D使用（图片剪切）
iOS开发UI篇—Quartz2D使用(图片剪切) 一.使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - ...
【iOS】Quartz2D图片剪切
一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - (void)drawRect:(CGRect)rec ...
图片上传，图片剪切jquery.imgareaselect
---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" ...
android——拍照，相册图片剪切其实就这么简单
接触android这么久了.还没有真正的浩浩看看android拍照,相册图片剪切到底是怎么回事,每次都是从别人的代码一扣,就过来了.其实,谷歌提供的API已经很强大.只需要用的好,就那么几句就可以搞定 ...
用JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...
opencv 图片剪切
import cv2 as cv import numpy as np # 图片剪切 img = cv.imread('../images/moon.jpg', flags=1) # flags=1读 ...
Viewer.js插件浏览图片
https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

随机推荐

python正则下载图片
import urllib.request import re # 打开图片路径 def open_url(url): #设置请求路径 req = urllib.request.Request(url ...
APACHE - CXF 入门详解
ref: https://www.cnblogs.com/hoojjack/p/6724659.html
mac 电脑连接linux 服务器
Mac 电脑下连接Linux服务器命令: ssh -p 端口号(22) 用户名@ip OK,输入密码,搞定
Nginx和apache服务器中php运行方式
PHP5的CGI方式的一大优势是内置了FastCGI的支持,只需指明绑定的地址和端口参数便可以以FastCGI的方式运行,如下: php-cgi -b 127.0.0.1:9000 配置Nginx的P ...
Mybatis--02
主要内容: 1 输入映射和输出映射输入参数映射返回值映射 2 动态sql if where foreach sql片段 3 关联查询一对一关联一对多关联 4 整合Spring #{}代表一个占 ...
Linux数字雨
<黑客帝国>电影里满屏幕代码的"数字雨",在 Linux 里面你也可以轻松实现这样的效果,你只需要一个命令 cmatrix . 需要先安装,因为 Ubuntu 没有预装 ...
重新配置ocr voting
由于存储空间不足,下线的数据库需要把存储空间腾出来,关闭集群资源,主机工程师收回lun需要(包括ocr 和 voting data 磁盘组),新的应用需要上线需要新的数据库,新的hitach存储到位需 ...
Tomcat服务的安装及配置
在进行Java Web开发时必须有Web服务器的支持,常用的Web服务器便是Tomcat,本文主要介绍Tomcat的安装和配置.客户端通过Web浏览器发送一个基于HTTP协议的请求到服务器上后,服务器 ...
IPFS环境安装
IPFS是一个分布式的P2P的协议,可能会取代这个http,全球的点都可能存储这个数据 IPFS搭建环境 1.首先是下载节点软件到官网下载windows版本的ipfs节点软件,如果不能访问官网的话,可 ...
awk-for循环简单用法
文本: [root@VM_0_84_centos ~]# cat sshd.txt 1 2 3 4 5 6 7 8 9 循环打印上述文本 for 循环的固定格式 i=1设置i的初始变量 i< ...

步步为营-87-imageAreaSelect插件使用(图片剪切)

步步为营-87-imageAreaSelect插件使用(图片剪切)的更多相关文章

随机推荐

热门专题