步步为营-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 Settingsfile_size_limit: "2 MB",file_types: "*.jpg;*.gif",file_types_description: "JPG Images",file_upload_limit: 0,    // 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: 160,button_height: 22,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: 1,button_text_left_padding: 5,// Flash Settingsflash_url: "/SWFUpload/swfupload.swf",    // Relative to this fileflash9_url: "/SWFUpload/swfupload_FP9.swf",    // Relative to this file
custom_settings: {upload_target: "divFileProgressContainer"},// Debug Settingsdebug: false});}//上传成功以后调用该方法
        function showImage(file, serverData) {var data = serverData.split(':');//将上传成功的图片作为div的背景console.log(data[0]);$("#selectbanner").attr("src", data[0]);$('#selectbanner').imgAreaSelect({selectionColor: 'blue', x1: 0, y1: 0, x2: 100,y2: 100, 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(0, 0, 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 示例

转载于:https://www.cnblogs.com/YK2012/p/7456355.html

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

利用jquery插件的图片剪切上传功能
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图, ...
小程序_图片剪切功能（支持多图片上传）
前端图片剪切上传功能是常见的功能,在开发过程中,研发一个这样的功能要花的时间也会很多,现在把一个研发好了的图片剪切插件发出来.支持剪切和大小缩放. wxml 1  ...
使用jquery jcrop插件进行图片的截取与保存
第一步:上传大图片到服务器,并且展示到页面第二部:调用jcrop组件js及css <script src="${ctx}/js/jquery-jcrop/jquery.Jcrop.j ...
php图片特效,php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
本文实例讲述了php_imagick实现图片剪切.旋转.锐化.减色或增加特效的方法.分享给大家供大家参考.具体分析如下: 一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使 ...
ios UIImage 圆形图片剪切方案
@interface UIImage (Resize)//按形状切割图像 - (UIImage*)cutImageWithRadius:(int)radius;@end //图片剪切 - (UIIma ...
图片剪切空指针崩溃问题在Android 6.0系统出现
软件在上传头像的时候有个图片剪切功能,本来一直没有问题的,后来公司有个同事买了部nexus手机,运行后发现图片剪切后崩溃,后来发现问题并解决在这里记录一下 public static Bitmap ...
opencv 图片剪切
1 import cv2 as cv 2 import numpy as np 3 4 # 图片剪切 5 img = cv.imread('../images/moon.jpg', flags=1) ...
UWP 图片剪切旋转工具
原文:UWP 图片剪切旋转工具好久没撸随笔了,明天终于放假休息了..准备去进行信仰充值,看<魔兽>去(话说surface phone 好久出,让我这个做UWP的也充点信仰..) 先上下效 ...
用JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

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

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

最新文章

热门文章