imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能。其文档和Demo也是很详尽的。大家可以到http://odyniec.net/projects/imgareaselect/了解更多的细节。
下面我们就开始使用imgAreaSelect 开始code吧。
第一还是要引用jquery,接着引用下载好的 jquery.imgareaselect.pack.js 文件和 imgareaselect-default.css 样式文件。
接着写一些元素标签
<img id="ferret" src="" alt="It's coming right for us!" title="It's coming right for us!"
style="float: left; margin-right: 10px; width: 400px; height: 300px" />
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="x2" value="" />
<input type="hidden" name="y2" value="" />
<input id="loadFile" type="file" name="name" onchange="readURL(this);" />
<input type="submit" name="submit" value="Submit" />
这将用来展示图片和记录截取图片的坐标点。
接着开始写js
<script type="text/javascript">
//绘制小图
function preview(img, selection) {
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
$(document).ready(function () {
//添加小图
$('<div><img id="ferret1" src="" style="position: relative;" /><div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#ferret'));
//主图编辑
$('#ferret').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: '4:3', onSelectChange: preview, onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});
});
//本地预览
function readURL(input) {
var strSrc = $("#loadFile").val();
//验证上传文件格式是否正确
var pos = strSrc.lastIndexOf(".");
var lastname = strSrc.substring(pos, strSrc.length);
if (lastname.toLowerCase() != ".jpg") {
alert("您上传的文件类型为" + lastname + ",图片必须为 JPG 类型");
return false;
}
//验证上传文件是否超出了大小
if (input.files[0].size / 1024 > 150) {
alert("您上传的文件大小超出了150K限制!");
return false;
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#ferret').attr('src', e.target.result);
$('#ferret1').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
上述js完成了本地预览(此处的预览在chrome中正常;在IE中有些问题暂时没有找到本地预览的方法,大家可以用远程方式替换)和截取图片的功能。
前端写完了,接下来开始写后端的代码了
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
int x1 = Convert.ToInt32(Request["x1"]);
int y1 = Convert.ToInt32(Request["y1"]);
int x2 = Convert.ToInt32(Request["x2"]);
int y2 = Convert.ToInt32(Request["y2"]);
HttpFileCollection files = Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
file.SaveAs(Server.MapPath("Upload/" + file.FileName));
//设置缩略图
int Thumbnailwidth = 400;
int Thumbnailheight = 300;
//新建一个bmp图片
Bitmap bitmap = new Bitmap(Thumbnailwidth, Thumbnailheight);
//新建一个画板
Graphics graphic = Graphics.FromImage(bitmap);
//设置高质量插值法
graphic.InterpolationMode = InterpolationMode.High;
//设置高质量,低速度呈现平滑程度
graphic.SmoothingMode = SmoothingMode.HighQuality;
//清空画布并以透明背景色填充
graphic.Clear(System.Drawing.Color.Transparent);
//原图片
Bitmap originalImage = new Bitmap(file.InputStream);
//在指定位置并且按指定大小绘制原图片的指定部分
graphic.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, Thumbnailwidth, Thumbnailheight),
new System.Drawing.Rectangle(0, 0, originalImage.Width, originalImage.Height),
System.Drawing.GraphicsUnit.Pixel);
//得到缩略图
System.Drawing.Image ThumbnailImage = System.Drawing.Image.FromHbitmap(bitmap.GetHbitmap());
//创建选择图片
Bitmap selectbitmap = new Bitmap(x2-x1, y2-y1);
//新建一个画板
Graphics selectgraphic = Graphics.FromImage(selectbitmap);
//裁切
selectgraphic.DrawImage(ThumbnailImage, 0, 0, new Rectangle(x1, y1, x2 - x1, y2 - y1), GraphicsUnit.Pixel);
//保存
selectbitmap.Save(Server.MapPath("Upload/"+Guid.NewGuid() + file.FileName), ImageFormat.Jpeg);
//todo:将上述资源释放
}
}
}
这里我们先将图片缩小到与前台大图一样的比例,然后在进行截取,并保存到文件中。
转自http://www.cnblogs.com/WilliamWang/archive/2012/09/17/imgareaselect.html
分享到:
相关推荐
jquery.imgareaselect-0.8.min.js
jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装
这是利用jquery的imgareaselect进行截图的插件,使用代码请看我博客
jquery.imgareaselect-0.9.10图片裁切插件下载,可把上传的图片进行裁剪再保存,在以前来说非常棘手的问题,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现图片裁切功能。注,本插件包内不包括...
jquery.imgareaselect是一个图像上传于裁剪的java代码
使用JQuery ImgAreaSelect插件实现图片在线剪裁并保存到ASP.NET服务器端实例。
利用jquery的imgAreaSelect插件实现图片裁剪示例
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解,需要的的朋友参考下吧
jquery_imgareaselect图片裁切插件使用的中文文档
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识;那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3...
jQuery插件imgAreaSelect 实例代码,自己实践后的代码,很简单的代码,完成了图片上传、剪切的功能,很不错,推荐。
jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像
jquery的imgareaselect插件
本篇文章主要对jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)的使用做了简要分析说明。需要的朋友来看下吧
基于jquery(imgareaselect)的网页截图插件,完整项目。可在eclipse中直接运行
本篇文章主要对jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)的使用做了简要分析说明。需要的朋友来看下吧,希望对大家有所帮助
javascript截图 jQuery插件imgAreaSelect用法详解_.docx
Jsp图片预览程序 imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能。其文档和Demo也是很详尽的。大家可以到http://odyniec.net/projects/imgareaselect/了解更多的细节...
jquery1.8.0 和 .imgareaselect控件共同实现突破的裁剪。代码已经测试通过