SWFUpload.js方法图片的上传和imgAreaselect.js方法图片任意部位的截取
2017-02-06 19:53
567 查看
SWFUpload.js方法图片的上传和imgAreaselect.js方法图片任意部位的截取
第一部分：图片上传1.创建c#web窗体
2.添加SWFUpload.js的文件引用
引用文件如下： <script src="../Scripts/swfupload/swfupload.js"></script>
<script src="../Scripts/swfupload/swfupload.queue.js"></script>
<script src="../Scripts/js/handlers.js"></script>
注意：handlers.js的引用不放在其他2个引用文件夹下，放在同一个文件夹不知道出了什么错误。
3.添加选择图片按钮和显示图片布局
<body> <form id="form1" runat="server"> <div><span id="spanButtonPlaceHolder"></span></div> <div id="divFileProgressContainer" style="height: 75px;"></div> <img id="divphotoimage" /> </form> </body>4.编写图片上传js代码
<script>
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend Settings
upload_url: "../Handler/test.ashx?cmd=upload", //一般处理程序（带参数）
post_params: {
"ASPSESSID": "<%=Session.SessionID %>" //参数（不知道干嘛）
},
// File Upload Settings
file_size_limit: "2048", // 2MB //文件大小
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.
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: showimage, //图片显示成功的调用的方法，showimage是方法
upload_complete_handler: uploadComplete,
// Button settings
button_image_url: "../Scripts/js/images/XPButtonNoText_160x22.png", //选择图片按钮在这里设计
button_width: "160",
button_height: "22",
button_placeholder_id: "spanButtonPlaceHolder", //在哪里显示（占位符）
button_text: '<span class="theFont">选择文件</span>', //按钮显示文字内容
button_text_style: ".theFont { font-size: 13;}",
button_text_left_padding: 12,
button_text_top_padding: 3,
// Flash Settings
flash_url: "../Scripts/swfupload/swfupload.swf", // Relative to this file swfupload.swf需要添加到引用的文件夹下
custom_settings: {
upload_target: "divFileProgressContainer" //图片上传成功的信息内容
},
// Debug Settings
debug: false
});
}//图片上传成功后
function showimage(file, serverData) { //serverData是一般处理程序返回的文件上传的图片路径
$("#divphotoimage").attr("src", serverData);
}
</script>5.后台处理
#region 上传图片
private void fileuloadimage(HttpContext context)
{HttpPostedFile file = context.Request.Files[0];
string filename = Path.GetFileName(file.FileName);
string fileXect = Path.GetExtension(filename);
string filepath = context.Request.MapPath("/uploadimage/") + filename;file.SaveAs(filepath);
context.Response.Write("/uploadimage/" + filename);}
#endregion
6.SWFUpload.js的下载链接：http://pan.baidu.com/s/1mi8trVq 密码：xjbq
第二部分：图片截取
1、下载imgAreaselect.js 链接：http://pan.baidu.com/s/1eR2jFgA 密码：dcnr
2、 完整引用如下
<link href="../imgAreaSelect/imgareaselect-default.css" rel="stylesheet" />
<script src="../Scripts/ui/jquery-1.4.2.js"></script>
<script src="../imgAreaSelect/jquery.imgareaselect.min.js"></script>
<script src="../Scripts/swfupload/swfupload.js"></script>
<script src="../Scripts/swfupload/swfupload.queue.js"></script>
<script src="../Scripts/js/handlers.js"></script>
3、界面布局
<form id="form1" runat="server"> <div><span id="spanButtonPlaceHolder"></span></div> <div id="divFileProgressContainer" style="height: 75px;"></div> <img id="divphotoimage" /> <input id="imagecut" type="button" value="图像截取" /> <input type="hidden" id="imgsrc" /> <br /> <img id="cutnewimage" /> </form>4、图片上传成功后显示一个截取的图片框
function showimage(file, serverData) {
$("#divphotoimage").attr("src", serverData);//将图片给了img后就会触发该事件，理解为创建一个div （0,0）左上角 （250，250）右下角 onSelectEnd为事件：选择要截图的图片后
$("#divphotoimage").imgAreaSelect({ selectionColor: 'bule', x1: 0, y1: 0, x2: 250, y2: 250, seclectionOpacity: 0.2, onSelectEnd: preview });
$("#imgsrc").val(serverData); //将图片路径给隐藏域，在js里面最好不要使用全局变量，以后要用到图片路径
}5、图片截取成功后数据的保存function preview(img, selection) {//存取图片的x、y坐标和宽度高度
$("#divphotoimage").data('x', selection.x1);
$("#divphotoimage").data('y', selection.y1);
$("#divphotoimage").data('w', selection.width);
$("#divphotoimage").data('h', selection.height);
}6.参数的取出方法和传递给一般处理程序的方法$(function () {//点击图片截取按钮触发的事件
$("#imagecut").click(function () {var pars = { //传递的参数
x: $("#divphotoimage").data('x'),
y: $("#divphotoimage").data('y'),
width: $("#divphotoimage").data('w'),
height: $("#divphotoimage").data('h'),
imgsrc: $("#imgsrc").val(),
cmd: "cut"
};
$.post("../Handler/test.ashx", pars, function (data) { //一般处理程序请求的方法
$("#cutnewimage").attr("src", data); //将截取成功的图片显示出来
});
})
})7、后台将传递的参数也是就截取的图片画出来，保存起来#region 截取图片
private void cutuploadimage(HttpContext context)
{
int x = Convert.ToInt32(context.Request["x"]);
int y = Convert.ToInt32(context.Request["y"]);
int width = Convert.ToInt32(context.Request["width"]);
int height = Convert.ToInt32(context.Request["height"]);
string imgsrc = context.Request["imgsrc"];
Bitmap map = new Bitmap(width, height); //创建画布
Graphics g = Graphics.FromImage(map); //创建画笔
Image img = Image.FromFile(context.Request.MapPath(imgsrc)); //原始图片//将原图的指定范围画到画布上 //第一个img参数，表示对哪张图进行操作 //第二个参数，画多么大 //第三个参数，画多大的区域 //GraphicsUnit.Pixel像素单位g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); string filecutname = Guid.NewGuid().ToString(); string fullDir = "/uploadimage/" + filecutname + ".jpg"; map.Save(context.Request.MapPath(fullDir),
System.Drawing.Imaging.ImageFormat.Jpeg); context.Response.Write(fullDir); } #endregion
第三部分：完整的demo
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="text.aspx.cs" Inherits="ebook.Pages.text" %>
<!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>
<link href="../imgAreaSelect/imgareaselect-default.css" rel="stylesheet" />
<script src="../Scripts/ui/jquery-1.4.2.js"></script>
<script src="../imgAreaSelect/jquery.imgareaselect.min.js"></script>
<script src="../Scripts/swfupload/swfupload.js"></script>
<script src="../Scripts/swfupload/swfupload.queue.js"></script>
<script src="../Scripts/js/handlers.js"></script>
<script>
var swfu;
window.onload = function () {swfu = new SWFUpload({// Backend Settings
upload_url: "../Handler/test.ashx?cmd=upload", // Relative to the SWF file
post_params: {"ASPSESSID": "<%=Session.SessionID %>"
},
// File Upload Settings
file_size_limit: "2048", // 2MB
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.
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 settings
button_image_url: "../Scripts/js/images/XPButtonNoText_160x22.png", // Relative to the Flash file
button_width: "160",
button_height: "22",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">选择文件</span>',
button_text_style: ".theFont { font-size: 13;}",button_text_left_padding: 12,
button_text_top_padding: 3,
// Flash Settings
flash_url: "../Scripts/swfupload/swfupload.swf", // Relative to this file
custom_settings: {
upload_target: "divFileProgressContainer"
},
// Debug Settings
debug: false
});
}
function showimage(file, serverData) {
$("#divphotoimage").attr("src", serverData);$("#divphotoimage").imgAreaSelect({ selectionColor: 'bule', x1: 0, y1: 0, x2: 250, y2: 250, seclectionOpacity: 0.2, onSelectEnd: preview });$("#imgsrc").val(serverData);}
//确定出要截取图像的方位数据参数
function preview(img, selection) {$("#divphotoimage").data('x', selection.x1);$("#divphotoimage").data('y', selection.y1);$("#divphotoimage").data('w', selection.width);$("#divphotoimage").data('h', selection.height);}
$(function () {
$("#imagecut").click(function () {var pars = {x: $("#divphotoimage").data('x'),y: $("#divphotoimage").data('y'),width: $("#divphotoimage").data('w'),height: $("#divphotoimage").data('h'),imgsrc: $("#imgsrc").val(),cmd: "cut"
};
$.post("../Handler/test.ashx", pars, function (data) {$("#cutnewimage").attr("src", data);});
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div><span id="spanButtonPlaceHolder"></span></div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<img id="divphotoimage" />
<input id="imagecut" type="button" value="图像截取" />
<input type="hidden" id="imgsrc" />
<br />
<img id="cutnewimage" />
</form>
</body>
</html>
后台代码：
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Web;
namespace ebook.Handler
{
/// <summary>
/// test 的摘要说明
/// </summary>
public class test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string str = context.Request["cmd"];
if (str == "upload")
{
fileuploadimage(context);
}
else if (str == "cut")
{
cutuploadimage(context);
}
}
#region 截取图片
private void cutuploadimage(HttpContext context)
{
int x = Convert.ToInt32(context.Request["x"]);
int y = Convert.ToInt32(context.Request["y"]);
int width = Convert.ToInt32(context.Request["width"]);
int height = Convert.ToInt32(context.Request["height"]);
string imgsrc = context.Request["imgsrc"];
Bitmap map = new Bitmap(width, height);
Graphics g = Graphics.FromImage(map);
Image img = Image.FromFile(context.Request.MapPath(imgsrc));
g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
string filecutname = Guid.NewGuid().ToString();
string fullDir = "/uploadimage/" + filecutname + ".jpg";
map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg);
context.Response.Write(fullDir);
}
#endregion
#region 上传图片
private void fileuploadimage(HttpContext context)
{
HttpPostedFile file = context.Request.Files[0];
string filename = Path.GetFileName(file.FileName);
string filejpg = Path.GetExtension(filename);
string guid = Guid.NewGuid().ToString();
string Dir = "/uploadimage/" + filename + guid + filejpg;
file.SaveAs(context.Request.MapPath(Dir));
context.Response.Write(Dir);
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- swfupload+imgareaselect打造头像图片在线编辑无刷新上传
- ASP 实例：头像上传。文件(图片)上传，头像截取(Jquery的imgAreaSelect插件来选取截取区域)
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
- 图片上传（方法一：jquery.upload.js）
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
- jQuery-图片上传裁剪插件--imgAreaSelect(分析二) 同步显示图像位置信息
- Java上传图片、剪裁图片、 imgareaselect +BufferedImage + BufferedImage
- Java 使用imgAreaSelect插件进行图片上传切割
- Asp.Net使用ImgAreaSelect实现图片截取
- jQuery-图片上传裁剪插件--imgAreaSelect(分析三) 如何获得选择域的图像信息
- imgareaselect jquery.imgareaselect.js 页面图片插件
- 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）
- jQuery-图片上传裁剪插件--imgAreaSelect(分析四) 上传服务器端
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
- C#结合imgareaselect生成缩略图并截取图片
- imgAreaSelect做前台图片截取+java后台处理
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
- jQuery-图片上传裁剪插件--imgAreaSelect(分析一) 放大缩小
- 利用imgareaselect辅助后台实现图片上传裁剪