利用jquery的imgAreaSelect插件实现图片裁剪示例
将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能。我们来看看它的实现步骤:
1、包含进CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件
2、html代码(要裁剪的图片元素)
<img id="selectbanner" src="/pic/banner.jpg" />
3、imgAreaSelect的数据操作
$('#selectbanner').imgAreaSelect({ selectionColor: 'blue', x1:0, y1:0, x2: 950, maxWidth:950,minWidth:950,y2:400,minHeight:400,maxHeight:400, selectionOpacity: 0.2 , onSelectEnd: preview });
这样即可在该图片元素中使用裁剪功能了,当选框确定之后我们要保存被选择的图片还得自己写代码来操作。下面是当确定好图片区域后点击一个裁剪按钮后的操作:
//裁剪确认操作
$("#sliceButton").click(function() {
var pic = $('#selectbanner').attr('src');
var x,y,w,h;
$.post( "/template/sliceBanner", { x:$('#selectbanner').data('x'), y:$('#selectbanner').data('y'), w:$('#selectbanner').data('w'), h:$('#selectbanner').data('h'), pic:pic
}, function(data){ //把裁剪后图片加载到原处 if(data){ $('#selectbanner').attr(pic); } } );
});
//设置选取框的选取信息
//利用jquery中的data方法来保存生成的数据
function preview(img, selection) {
$('#selectbanner').data('x',selection.x1);
$('#selectbanner').data('y',selection.y1);
$('#selectbanner').data('w',selection.width);
$('#selectbanner').data('h',selection.height);
}
4、PHP端的主要代码:
//利用GD库来作裁剪操作
function sliceBanner(){
$x = (int)$_POST['x']; $y = (int)$_POST['y']; $w = (int)$_POST['w']; $h = (int)$_POST['h']; $filename = trim($_POST['pic']); if(isset($filename) ){ $uploadBanner = '/temp'. $filename; $sliceBanner = 'upload/'. $filename; $src_pic = getImageHander($uploadBanner); if(!$src_pic){ echo 0;exit; }
$dst_pic = imagecreatetruecolor($w, $h); imagecopyresampled($dst_pic, $src_pic, 0, 0, $x, $y, $w, $h, $w, $h);
imagejpeg($dst_pic, $sliceBanner);
imagedestroy($src_pic);
imagedestroy($dst_pic);
echo 1;exit; } echo 0 ;exit;
}
function getImageHander ($url) {
$size=@getimagesize($url);
switch($size['mime']){
case 'image/jpeg': $im = imagecreatefromjpeg($url);break; case 'image/gif' : $im = imagecreatefromgif($url);break; case 'image/png' : $im = imagecreatefrompng($url);break; default: $im=false;break; }
return $im;
}
1、介绍
ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion。另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳、图片编辑等。
2、基本用法
这个插件基于jQuery上通过imgAreaSelect()方法来调用,它操作的对象是HTML中元素内的图像。
如果在jQuery对象里有不止有一个img元素,那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素,它支持任何块级元素(比如有图像背景的div元素)。
与其它jQuery插件相似,这个插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。
3、选项
用户在这个插件的很多方面都可以进行定制,用户通过插件选项来达到这个目的(这些选项会在插件初始化的时候起效)。这些选项包括:
选项 | 描述 |
aspectRatio | 长宽比,以后在选择时候就会维持不变。 e.g. "4:3" |
autoHide | 如果设为true,那么在选择完后区域会消失。 Default:false |
classPrefix | 预先给插件元素的前缀(详见下面:5、元素与类) Default:imgareaselect |
disable | 如果设置成true,这个插件将不起作用(但是图像还是可见的) |
enable | 如果设置成true,这个插件又将重新起作用 |
fadeSpeed | 若设置成大于零的某个数,将"渐隐/渐现"这个插件 Default:true |
handles | 若设置成true,在改变大小的时候显示改变框(就是角点有些小"矩形") Default:false |
hide | 若设置成true,则隐藏选择框 |
imageHeight | 图像的真实高度(因为有可能被CSS缩放过了) |
imageWidth | 图像的真实宽度(因为有可能被CSS绽放过了) |
instance | 若设为true,imgAreaSelect()函数会返回一个对选择区域图像的一个引用,以便能够进一步使用API。(详见8、API方法) |
keys | 启用/关闭键盘支持(详见7、键盘支持) Default:false |
maxHeight | 限制选择框(以像素为单位),设置最大、最小的高度、宽度。 |
maxWidth | |
minHeight | |
minWidth | |
movable | 设置是否支持选择框移动 Default:true |
parent | 指定此插件默认所附加到的父元素 Default:body |
persistent | 若设置成true,点击选择区域外将开始一个新的选项(换言之,是否让用户只能移动/缩放选择区域) Default:false |
remove | 若设置成true,则该插件将完全移除 |
resizable | 决定选择区域是否可以改变大小 Default:true |
resizeMargin | 当选择区域宽度超过多少像素时将启用"可改变大小"模式 |
show | 如果设置成true,选择区域将可见 |
x1 y1 | 初始化时选择框左上角的坐标 |
x2 y2 | 初始化时选择框右下角的坐标 |
zIndex | 设置此插件所作用元素的z-index的值,一般情况下,imgAreaSelect 总是可以自动计算出它的值,但是极少数情况下还是有必要设置的。 |
onInit | 当插件初始化时所调用的函数(详见6、回调函数) |
onSelectStart | 当开始选择时所调用的函数(详见6、回调函数) |
onSelectChange | 当改变选择区域时所调用的函数(详见6、回调函数) |
onSelectEnd | 当选择结束时所调用的函数(详见6、回调函数) |
4、样式表
然后在初始化imgAreaSelect时,使用onSelectEnd()回调函数将选择后的数据赋给这些隐藏域,正如下面代码那样:
$(document).ready(function () {
$('#ladybug').imgAreaSelect({
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);
}
});
});
这样当点击"submit按钮"时,页面将上载到服务器,如果使用PHP的话,使用$_POST['x1']等就得到相应的坐标数据了
来源:http://blog.sina.com.cn/s/blog_70a3539f01018jdl.html