步步为营-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插件浏览图片
随机推荐
- Hadoop环境准备
1． 集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起. HDFS集群负责海量数据的存储,集群中的角色主要有: NameNode.DataN ...
- ActiveMQ中Broker的应用与启动方式
Broker:英语有代理的意思,在activemq中,Broker就相当于一个Activemq实例. 1. 命令行启动实例: 1.activemq start使用默认的activemq.xml启动 E ...
- layout 的应用
在XAF的开发中,详细Detail 或组合DashBoard页面,需要使用 LayoutControl 进行控件排列,下面讲述如何通过写代码进行操作. 0.DevExpress 的布局控件(DevEx ...
- MySQL如何启用密码强度审计【转】
1.密码验证插件安装 要使服务器可以使用,插件库文件必须位于MySQL插件目录(plugin_dir系统变量指定的目录)中.如有必要,请设置plugin_dir服务器启动时的值, 以告知服务器插件目录 ...
- 通过全备+relaylog同步恢复被drop的库或表【转】
MySQL 中drop 等高危误操作后恢复方法 实验目的: 本次实验以恢复drop操作为例,使用不同方法进行误操作的数据恢复. 方法: 利用master同步 伪master+Binlog+同步 利用b ...
- 查看局域网中连接的主机名和对应的IP地址
1.查看局域网中的所有主机名 2.通过主机名解析IP地址:-4选项 3.通过IP地址解析主机名:-a选项
- 题解-BOI 2004 Sequence
Problem bzoj & Luogu 题目大意: 给定序列\(\{a_i\}\),求一个严格递增序列\(\{b_i\}\),使得\(\sum \bigl |a_i-b_i\bigr|\)最 ...
- bzoj 1175： The stairways of Saharna
一道杨氏矩阵的题,萌新初入门,还不是很懂,这篇 blog 讲的超级好(就是看图有点麻烦) 据说这玩意儿可以代替堆和平衡树用,支持插入.删除.查询,跑得还挺快的(慢着,复杂度好像是 n^2 ? 而且空间 ...
- frei0r-1.6.1 for win32 133 DLLs
ffmpeg中frei0r滤镜基本使用方法 ffplay -vf frei0r=filter_name=filter_params:filter_params:... 在Windows系统ffmpeg ...
- OpenSIPS 1.11.1安装记录
说明:操作系统Centos 6.5 64位 安装步骤: 1.安装依赖包 : yum -y install gcc make gdb wget yum -y install flex bison nc ...