您的位置：首页 > 其它

SwfUpload及imgareaselect使用方法

2015-08-02 21:57 393 查看

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(0,0,width,height),new Rectangle(x,y,width,height),GraphicsUnit.Pixel );

string bigName = path.Substring(path.LastIndexOf('/')+1,path.LastIndexOf('.')-1-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");

}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航