SwfUpload及imgareaselect使用方法
生活随笔
收集整理的這篇文章主要介紹了
SwfUpload及imgareaselect使用方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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 Settingsupload_url: "/upload.ashx",post_params: {"ASPSESSID": "<%=Session.SessionID %>"},// File Upload Settingsfile_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 settingsbutton_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 Settingsflash_url: "/scripts/swfupload/swfupload.swf", // Relative to this fileflash9_url: "/scripts/swfupload/swfupload_FP9.swf", // Relative to this file custom_settings: {upload_target: "divFileProgressContainer"},// Debug Settingsdebug: 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值命名圖片。保存完成，把圖片的相對地址發送到前端。
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");}}}?
轉載于:https://www.cnblogs.com/zhaoyihao/p/4696848.html
總結
以上是生活随笔為你收集整理的SwfUpload及imgareaselect使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js 创建可扩展库
- 下一篇： (转)目前比较全的CSS重设(reset