Asp.net实现在线截图(大图截取为小图)
我这文章就是实现这功能,开发工具是vs2005和两个js类库,dom-drag.js和jquery,使用比较简单,这个两个js类库是恨优秀的,建议大家再看看。
先发一个效果图片看看
这个效果是模拟的,如何上传图片等这些小问题就不说了。那个大图片是已经上传到服务器了。然后有个黑色边框的框长和宽都是100px。我们就是要截取这个大小的图片来作为我们的头像。你可以拖动这个黑框到合适的位置来截取我们想要的图片。在ie7的效果中必须点中边框才能拖到,在火狐中可以点住黑框的任何地方。而且这个黑框我没有做边界限制,就是说他不应该拖出这个大图片的范围。如果拖出了就是报错。
我们需要建立这个两个页面cutImage.aspx和cutImageAjax.aspx
cutImage.aspx就是我们看到的效果图了。
<script language=javascript src=drag.js></script>
<script language=javascript src=jquery-1.2.3.pack.js></script>
添加两个js类库
然后是body中的html标签。这里面的html样式是需要下一番功夫才出来的(aa.gif就是我们测试用的大图)
<div style="position:relative;">
<img src="pic/aa.gif" id="im" />
<div style=" border:solid 2px black ;width:100px; height:100px; cursor:hand; position:absolute; left:0px; z-index:10; top:0px; background-color:Black filter:alpha(opacity=20);" id="divCut"></div>
</div>
<hr />
<input type=button οnclick="cut()" value="确定裁剪" />
<hr />
裁剪过的结果:
<img id="imgresult" />
<hr />
<div style="border:solid 1px black;" id="divRecord"></div>
然后就是js代码了
<script language=javascript>
function init()//初始化执行
{
var cutDiv = document.getElementById('divCut');
Drag.init(cutDiv);//这个就是拖到黑框的关键
cutDiv.onDrag = function(x,y)//这个是拖动黑框时候引发的事件,x,y就是坐标
{
document.getElementById("divRecord").innerHTML ="cutDiv 的坐标" + x + '--' + y + "<br>图片坐标"+ document.getElementById("im").offsetLeft + "-"+document.getElementById("im").offsetTop;
}
}
function cut()//裁剪按钮的事件
{
var x = document.getElementById("divCut").offsetLeft - 10;//减10是因为大图的起始x是10.
var y = document.getElementById("divCut").offsetTop;
$.get("cutImageAjax.aspx?t=" +((new Date()).valueOf()) , { offx:x ,offy:y }, callback);//jquery中ajax方法,比较简单了。就是要吧x,和y的坐标传过去。
}
function callback(res)//这个是回调函数。如果res等于空字符表示成功了,然后显示裁剪过的图片,我们裁剪过后的图片的地址和名字是固定。
{
if(res=='')
{
document.getElementById('imgresult').src= 'pic/aa1.gif';
}
}
</script>
然后就是该看cutImageAjax.aspx页面的后台处理了。其实后台裁剪图片是比较简单的。
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string x = Page.Request.QueryString["offx"].ToString();
string y = Page.Request.QueryString["offy"].ToString();
Bitmap bm = new Bitmap(Server.MapPath("pic/aa.gif"));
Rectangle cloneRect = new Rectangle(int.Parse(x),int.Parse(y) , 100,100);
PixelFormat format = bm.PixelFormat;
Bitmap cloneBitmap = bm.Clone(cloneRect, format);
// ===保存图片===
cloneBitmap.Save(Server.MapPath("pic/aa1.gif"),ImageFormat.Gif);
}
}
看看吧。关键的裁剪代码就是这样的。但是我这里没有做其他的判断,比如图片的格式等,如果上传其他不同格式图片可能还要做其他处理,这里我就没有说明了,不过道理差不多了。
这就over了。o(∩_∩)o...哈哈
转载于:https://www.cnblogs.com/goody9807/archive/2008/10/30/1323117.html
Asp.net实现在线截图(大图截取为小图)相关推荐
- 网页全屏截图、在线截图API
在我们的数字时代,网页截图已经成为了一个非常常见的需求,无论是为了记录网页信息.保存重要信息或是与他人分享自己看到的内容,截图工具都是必不可少的.今天,我想向大家推荐一个非常好用的在线网页全屏截图工具 ...
- ASP.NET技巧:字符自动截取问题
ASP.NET技巧:字符自动截取问题 发布者:[本站编辑] 来源:[北大青鸟广州天河培训中心] 浏览:[ 21 ] 字体:大 中 小 <script language=ja ...
- picpick截图工具截取滚动窗口只滚动一次就结束了解决办法
描述:picpick截图工具截取滚动窗口只滚动一次就结束了解决办法 步骤: 这是窗口尺寸造成的,将窗口进行缩小即可
- C#毕业设计——基于C#+asp.net+sqlserver在线论文提交系统设计与实现(毕业论文+程序源码)——在线论文提交系统
基于C#+asp.net+sqlserver在线论文提交系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于C#+asp.net+sqlserver在线论文提交系统设计与实现,文章末尾附有 ...
- asp毕业设计——基于asp+access的在线人才招聘网设计与实现(毕业论文+程序源码)——人才招聘网
基于asp+access的在线人才招聘网设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+access的在线人才招聘网设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦.需要下 ...
- 开发ASP.NET MVC 在线录音录像(音视频录制并上传)
开发ASP.NET MVC 在线录音录像(音视频录制并上传) 最近有个在线招聘录音的开发需求,需要在招聘网站上让招聘者上传录音和视频. 找到两个不错的javascript开源,可以在除了IE以外的浏览 ...
- asp毕业设计——基于asp+sqlserver的在线手机销售系统设计与实现(毕业论文+程序源码)——在线手机销售系统
基于asp+sqlserver的在线手机销售系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于asp+sqlserver的在线手机销售系统设计与实现,文章末尾附有本毕业设计的论文和源码下 ...
- ASP.NET网络在线考试系统(源代码+论文)ASP.NET网络商店销售管理系统的设计与实现(源代码+论文)
引言 1.1开发背景 随着网络技术的飞速发展,网络经济与人们的生活越来越紧密的联系在一起,随着信息技术的发展,网上购物与网上销售也在逐渐发展和普及.消费者与销售商都迫切需要一种简便与高速高效的购物与销 ...
- C#毕业设计——基于C#+asp.net+sqlserver在线英语自学系统设计与实现(毕业论文+程序源码)——在线英语自学系统
基于C#+asp.net+sqlserver在线英语自学系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于C#+asp.net+sqlserver在线英语自学系统设计与实现,文章末尾附有 ...
最新文章
- 如何惹毛一名开发者?
- 腾讯企业级消息中间件CMQ技术解密
- android 7.1 apk的systemuid相同导致问题[2]
- adam算法效果差原因_信电学院本科生提出AI新算法:速度比肩Adam,性能媲美SGD,ICLR领域主席赞不绝口...
- (十)DeepFaceLab:预包装的DIY深度伪造替代品
- linux无线网卡模拟ap,TP-Link无线网卡怎么设置虚拟AP
- 医药电子 | 三轴加速度传感器的类型、原理、特点和应用
- 橘子娱乐完成华创资本千万美元B+轮融资
- The Best of Many Worlds_ Dual Mirror Descent for Online Allocation Problems
- hah4h4h4h4 im her3
- 英文论文发表必备干货!SCI投稿7个阶段经典邮件模板,请拿走
- python中chr()和ord()函数的用法
- 鸡蛋,必须放在合适的篮子里
- CVPPA彩色图片转COCO格式
- figma制作点击下拉菜单
- 数据库的基本命令 创建数据库 创建表 插入数据
- odb 使用指南(一)环境搭建
- 北交 操作系统 课程笔记(一)
- 2019年年终个人总结
- PT 基于Multi Voltage的Physical Aware
热门文章
- java有无参数求长方形的周长面积_用java面向对象思想编程求长方形的周长和面积...
- 虚拟机下Linux安装图解之一:VMware Workstation的安装
- The current directory must be set to the ITT directory解决办法
- jittor 训练手写数字识别(mnist)
- 只此一招,全屏操作从此易如反掌
- HGST:中国将成为新云端运算大国
- Linux系统上的文件类型
- [Exchange]使用EWS托管API2.0同步邮箱
- 【Vegas原创】Oracle每日export的脚本(Windows版)
- random模块——生成伪随机数