JQuery在线截取图片
前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取
效果如下
免费下载地址:http://download.csdn.net/detail/a66081638/5258859
博客详细介绍地址:http://blog.csdn.net/a66081638/article/details/8802470 (求留言,求首页)
首先构建文档,样式
PS:这里就不写了 大家可以去博客里面看
JavaScript的编写
ASP.NET处理坐标,截取图片
好了 基本的功能都已实现,如果大家发现Bug,请留意
效果如下
免费下载地址:http://download.csdn.net/detail/a66081638/5258859
博客详细介绍地址:http://blog.csdn.net/a66081638/article/details/8802470 (求留言,求首页)
首先构建文档,样式
PS:这里就不写了 大家可以去博客里面看
JavaScript的编写
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
var
x, y;
var
old_position = {};
var
offset = {};
$(document).ready(hide);
function
hide() {
//选择层半透明 效果酷一点
$(
"#div_caijian"
).fadeTo(
"slow"
, 0.5);
//选择层移动事件
$(
"#div_caijian"
).mousedown(
function
(e) {
//获取当前选择层的相对坐标(与PageX,PageY不同clientX,clientY是相对坐标 如果有滚动条值也会不同)
old_position = { X: e.clientX, Y: e.clientY };
//获取当前选择层的偏移量
offset = $(
"#div_caijian"
).offset();
//修改选择层背景色
$(
"#div_caijian"
).css({
"background-color"
:
"White"
});
//获取相对坐标与偏移量的相差值
var
x1 = e.clientX - offset.left;
var
y1 = e.clientY - offset.top;
//绑定鼠标移动事件
$(
"#div_caijian"
).mousemove(
function
(k) {
//获取移动后的偏移量
offset = $(
"#div_caijian"
).offset();
//限制选择层只能在固定的区域移动,限制X最小值
if
((k.clientX - x1 - 73) <= 0) {
k.clientX = 73 + x1;
}
//限制X最大值
if
((k.clientX - x1 - 73) >= 155) {
k.clientX = 155 + 73 + x1;
}
//限制Y最小值
if
((k.clientY - y1 - 63) <= 0) {
k.clientY = 63 + y1;
}
//限制Y最大值
if
((k.clientY - y1 - 63) >= 115) {
k.clientY = 115 + 63 + y1;
}
//移动后的相对坐标减去相差值得到移动后的位置,获取X值
x = k.clientX - x1;
//获取Y值
y = k.clientY - y1;
//设置选择层的位置
$(
"#div_caijian"
).css({
left: x,
top: y
});
//PS:下面的这些值都是自己定义的,可以更改
//PS:显示图片层距离左上角X=73,Y=63
//所以移动后的偏移量应当减去上面的值即offset.left - 73,offset.top - 63
//移动层的最大X偏移量为155,最大Y偏移量为115
//下面的100=为显示而动态移动图片的宽度img_liulan-选择层宽度div_caijian/下面图片的宽度div_img*为显示而动态移动图片的宽度img_liulan
var
x2 = (offset.left - 73) / 155 * 100;
//下面的75=为显示而动态移动图片的高度img_liulan-选择层高度div_caijian/下面图片的高度div_img*为显示而动态移动图片的高度img_liulan
var
y2 = (offset.top - 63) / 115 * 75;
//设置为显示而动态移动图片的位置
$(
"#img_liulan"
).css({
left: 0 - x2,
top: 0 - y2
});
//显示选择层最新的偏移量减去73的值
$(
"#txt_left"
).val(offset.left - 73);
//显示选择层最新的偏移量减去63的值
$(
"#txt_top"
).val(offset.top - 63);
});
//绑定选择层鼠标离开时的事件
$(
"#div_caijian"
).mouseup(
function
(k) {
//去除掉选择层移动时的样式,将背景设置透明
$(
"#div_caijian"
).css({
"background-color"
:
"transparent"
});
//去除掉选增层移动事件
$(
"#div_caijian"
).unbind(
"mousemove"
);
});
});
//绑定页面级鼠标离开时的事件(强化作用)
$(document).mouseup(
function
() {
//去除掉选择层移动时的样式,将背景设置透明
$(
"#div_caijian"
).css({
"background-color"
:
"transparent"
});
//去除掉选增层移动事件
$(
"#div_caijian"
).unbind(
"mousemove"
);
});
};
|
ASP.NET处理坐标,截取图片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
protected
void
Button1_Click(
object
sender, EventArgs e)
{
//获取显示选择层最新的偏移量减去73的值
string
left = txt_left.Text;
//获取显示选择层最新的偏移量减去63的值
string
top = txt_top.Text;
//PS:因为要截取图片,所以会先生成一个新的文件便于截取
//生成新的文件名(GUID格式)
string
fileName =
""
;
//图片的格式
string
Extension =
""
;
//要截取的图片宽度
int
width=0;
//要截取的图片高度
int
height=0;
//要截取的图片路径
DirectoryInfo path =
new
DirectoryInfo(Server.MapPath(
"~/Images"
));
foreach
(FileInfo file
in
path.GetFiles())
{
//指定文件名
if
(file.Name.Substring(0,file.Name.IndexOf(
"."
))==
"Chrysanthemum"
)
{
//获取图片格式
Extension = file.Extension;
//获取新文件名称
fileName = Guid.NewGuid().ToString() + file.Extension;
//保存新文件
File.Copy(Server.MapPath(
"~/Images"
) +
"/"
+ file.Name, Server.MapPath(
"~/Images"
) +
"/"
+ fileName);
}
}
//如果新文件生成成功
if
(fileName!=
""
)
{
//加载要截取的文件
System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath(
"~/Images"
) +
"/"
+ fileName);
//获取要截取文件的宽度
width=image.Width;
//获取要截取文件的高度
height=image.Height;
//获取新图片的宽度
//240->显示选择层的宽度在页面上
//240 * width / (240 + 155) ->选择层的宽度/(选择层宽度+最大偏移量)*原始图片的宽度
int
newWidth = 240 * width / (240 + 155);
//获取新图片的高度
//180->显示选择层的高度在页面上
//180 * height / (180 + 115) ->选择层的高度/(选择层高度+最大偏移量)*原始图片的高度
int
newHeight = 180 * height / (180 + 115);
//获取新图片在原始图片上的左上角的X值
//left->当前X偏移量
//Convert.ToInt32(left) * width / (240 + 155) ->当前X偏移量/(选择层高度+最大偏移量)*原始图片的宽度
int
x = Convert.ToInt32(left) * width / (240 + 155);
//获取新图片在原始图片上的左上角的Y值
//top->当前Y偏移量
//Convert.ToInt32(top) * height / (180 + 115) ->当前Y偏移量/(选择层高度+最大偏移量)*原始图片的宽度
int
y = Convert.ToInt32(top) * height / (180 + 115);
//指定宽度,高度初始化新图片
Bitmap bmp =
new
Bitmap(newWidth, newHeight);
//加载画布
Graphics graphics = Graphics.FromImage(bmp);
//要生成的新图片的大小
Point[] destParal =
new
Point[] {
new
Point() { X = 0, Y = 0 },
new
Point() { X = newWidth, Y = 0 },
new
Point() { X = 0, Y = newHeight } };
//开始截取,参数分别是:要截取的图片,要生成新图片的大小,要截取图片在原始图片的X,Y,宽度,高度,srcRect度量单位(第三个参数)
graphics.DrawImage(image, destParal,
new
Rectangle() { X = x, Y = y, Width = newWidth, Height = newHeight }, GraphicsUnit.Pixel);
//保存截取后的图片
bmp.Save(Server.MapPath(
"~/Images"
)+
"/"
+ Guid.NewGuid().ToString() + Extension);
//释放画布资源
graphics.Dispose();
//释放原始图片资源
image.Dispose();
//用于截取的图片
File.Delete(Server.MapPath(
"~/Images"
) +
"/"
+ fileName);
}
}
|
好了 基本的功能都已实现,如果大家发现Bug,请留意