asp.net+jQuery.Jcrop实现在线裁剪图片 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Nov 21

asp.net+jQuery.Jcrop实现在线裁剪图片 不指定

tommyhu , 07:50 , ASP.NET , Comments(1) , Trackbacks(0) , Reads(12444) , Via Original Large | Medium | Small
asp.net+jQuery.Jcrop实现在线裁剪图片
Demo地址:

Highslide JS
the jQuery Image Cropping Plugin插件项目地址:
http://deepliquid.com/content/Jcrop.html
1、在页面上加载原图

这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码

2、用矩形框在原图上选取区域

这个我们要用到一个jQuery插件Jcrop,感谢Jcrop,其项目页面地址:http://deepliquid.com/content/Jcrop.html,再次感谢。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个隐藏域,用来存放当前选取的顶点坐标及选取矩形的尺寸,再放一个保存按钮,点击保存按钮后将在服务器上保存切割后的图片。代码如下:

四个隐藏域分别表示x:左上顶点x坐标;y:左上顶点y坐标;w:选取矩形宽度;h:选取矩形长度。
然后我们调用插件,做好初始化工作,引入js和css文件:

经过上述步骤,我们很高兴的看到一位美女出现在我们眼前,并任由我们选取任何部位,很刺激吧,由于demo在最后,先在这截一张效果图吧
Highslide JS
3、服务器端切割图片并输出切割后的图片:

切割图片的主要类代码如下:

在Handler.ashx中,接收页面传递过来的切割图片的顶点坐标以及长宽尺寸,并调用C#图像切割类实现图片切割:

最后我们在Result.aspx页面上接收切割后的图片路径并显示切割后的图片:

原文出处:http://www.cnblogs.com/sxwgf/archive/2011/11/21/2256645.html
▲返回顶部

互联网开发网友 Email Homepage
2012/04/19 14:26
博主,你的主题是什么,能告诉我吗?
Pages: 1/1 First page 1 Final page
Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot