你的位置： >
> 简单功能强大的jQuery图片剪裁插件Image Cropper
相信很多朋友都在大型的网站，如新浪微博、QQ微博上看到过头像裁图工具，感觉很高大尚吧，今天朋友们有福了，今天就来说一说一款这么高大尚的插件cropper，cropper是一款使用简单且功能强大的插件。该图片剪裁插件支持图片放大缩小，支持操作，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。
教程：图片剪裁插件Image Cropper使用方法
引入必要的js和css核心文件
&script&src=&/path/to/jquery.js&&&/script&&!--&jQuery&is&required&--&
&link&&href=&/path/to/cropper.css&&rel=&stylesheet&&
&script&src=&/path/to/cropper.js&&&/script&
构建html，可以将图片或canvas直接包裹到一个块级元素中
&div&class=&container&&
&&&img&src=&picture.jpg&&
初始化插件，可以使用$.fn.cropper方法来初始化该图片剪裁插件。
$('.container&&&img').cropper({
&&aspectRatio:&16&/&9,
&&crop:&function(data)&{
&&&&//&出来裁切后的图片数据.
注意事项：
注意：剪裁区域的尺寸继承自图片的父容器（包裹容器），所以要确保包裹图片的是一个可见的块级元素。
输出的剪裁数据基于原始的图片尺寸，你可以使用这些数据直接剪裁图片。
如果你要使用跨源图片来作为剪裁图片，请确保你的浏览器支持HTML5&，并且你的图片服务器支持Access-Control-Allow-Origin属性。
你可以通过$().cropper(options)方法来设置参数。如果你想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。
aspectRatio：类型：Number，默认值NaN。设置剪裁容器的比例。
crop：类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
preview：类型：String(选择器)，默认值''。添加额外的元素（容器）的预览。注意：
最大宽度是剪裁容器的初始化宽度
最大高度是剪裁容器的初始化高度
如果你设置了aspectRatio参数，确保预览容器具有相同的比例
strict：类型：Boolean，默认值true。在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
responsive：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin&class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin&class会阻止在图片url上添加时间戳，及图片的重新加载。
background：类型：Boolean，默认值true。是否在容器上显示网格背景。
modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
autoCrop：类型：Boolean，默认值true。是否在初始化时允许自动剪裁图片。
autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁区域的大小。
dragCrop：类型：Boolean，默认值true。是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
movable：类型：Boolean，默认值true。是否允许移动剪裁框。
resizable：类型：Boolean，默认值true。是否允许改变剪裁框的大小。
zoomable：类型：Boolean，默认值true。是否允许放大缩小图片。
mouseWheelZoom：类型：Boolean，默认值true。是否允许通过鼠标滚轮来缩放图片。
touchDragZoom：类型：Boolean，默认值true。是否允许通过触摸移动来缩放图片。
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
build：类型：Function，默认值null。build.cropper事件的简写方式。
built：类型：Function，默认值null。built.cropper事件的简写方式。
dragstart：类型：Function，默认值null。dragstart.cropper事件的简写方式。
dragmove：类型：Function，默认值null。dragmove.cropper事件的简写方式。
dragend：类型：Function，默认值null。dragend.cropper事件的简写方式。
zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。
zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。
因为图片是异步加载的，所以你需要在built之后才能调用下面的方法，setAspectRatio、replace和destroy方法例外。
$().cropper({
&&built:&function&()&{
&&&&$().cropper('method',&argument1,&,&argument2,&...,&argumentN)
move(offsetX, offsetY)：
offsetX：类型：Number，水平方向上移动的大小，单位像素。
offsetY：类型：Number，垂直方向上移动的大小，单位像素。
移动一幅图片：
$().cropper('move',&1,&0)
$().cropper('move',&0,&-1)
zoom(ratio)：
类型：Number
Zoom in：需要一个正数（ratio & 0）
Zoom out：需要一个负数（ratio & 0）
缩放一幅图片：
$().cropper('zoom',&0.1)
$().cropper('zoom',&-0.1)
rotate(degree)：
类型：Number
Rotate right：需要一个正数（degree & 0）
Rotate left：需要一个负数（degree & 0）
旋转一幅图片，需要CSS3 Transforms3d的支持（IE10+）：
$().cropper('rotate',&90)
$().cropper('rotate',&-90
enable()：使cropper可用。
disable()：冻结cropper。
reset()：重置剪裁区域的图片到初始状态。
clear()：清空剪裁区域。
replace(url)：
替换图片的URL重建cropper。
类型：String
一个新的图片URL
getData()：
类型：Object
x：剪裁区域左侧的偏移。
y：剪裁区域距上部的偏移。
width：剪裁区域的宽度。
height：剪裁区域的高度。
rotate：图片的旋转角度。
请参考实例效果
getContainerData()：
类型：Object
width：容器的当前宽度。
height：容器的当前高度。
输出容器尺寸数据。
getImageData()：
类型：Object
left：图片的左侧偏移。
top：图片的上部偏移。
width：图片的宽度。
height：图片的高度。
输出图片的位置和尺寸大小。
getCanvasData()：
类型：Object
left：canvas的左侧偏移。
top：canvas的上部偏移。
width：canvas的宽度。
height：canvas的高度。
输出canvas（图片容器）的位置和尺寸大小。
setCanvasData(data)：
类型：Object
left：canvas的距离左侧新的偏移。
top：canvas的距离上部新的偏移。
width：canvas新的宽度。
height：canvas新的高度。
改变canvas（图片容器）的位置和尺寸大小。
getCropBoxData()：
类型：Object
left：剪裁区域距离左侧的偏移。
top：剪裁区域距离上部的偏移。
width：剪裁区域的宽度。
height：剪裁区域的高度。
输出剪裁区域的位置和尺寸大小。
setCropBoxData(data)：
类型：Object
left：剪裁区域距离左侧新的偏移。
top：剪裁区域距离上部新的偏移。
width：剪裁区域新的宽度。
height：剪裁区域新的高度。
改变剪裁区域的位置和尺寸大小。
getCroppedCanvas([options])：
参数（默认值）：
类型：Object
width：输出的canvas目标宽度。
height：输出的canvas目标高度。
fillColor：canvas中填充的颜色。
类型：HTMLCanvasElement
一个画有剪裁图片的canvas。
浏览器支持：
基本图像：需要Canvas的支持（IE9+）
旋转图像：需要CSS3 animations Transforms3d的支持（IE10+）
跨域图像：需要HTML5 CORS settings attributes的支持（IE11+）
获取canvas绘制的剪裁图像。
在这之后，你可以直接将canvas作为图片显示，或使用canvas.toDataURL方法获取图像的数据链接，或者使用canvas.toBlob方法获取一个blob，并通过FormData方法将它更新到服务器上（如果浏览器支持这些API）。
$().cropper('getCroppedCanvas')
$().cropper('getCroppedCanvas',&{
&&width:&160,
&&height:&90
setAspectRatio(aspectRatio)：
aspectRatio：
类型：Number
需要一个正整数。
改变剪裁区域的比例。
setDragMode([mode])：
mode（可选项）：
类型：String
默认值：''
选项：'crop'或'move'
改变拖拽模式。提示：你可以通过双击来改变&crop& 和 &move&模式。
build.cropper：当cropper对象开始加载图片的时候触发该事件。
built.cropper：当cropper对象构建完成时触发该事件。
dragstart.cropper：
event.dragType：
&crop&：创建一个新的剪裁区域。
&move&：移动canvas。
&zoom&：通过触摸移动来缩放canvas。
&e&：调整剪裁区域东边的尺寸大小。
&w&：调整剪裁区域西边的尺寸大小。
&s&：调整剪裁区域南边的尺寸大小。
&n&：调整剪裁区域北边的尺寸大小。
&se&：调整剪裁区域东南边的尺寸大小。
&sw&：调整剪裁区域西南边的尺寸大小。
&ne&：调整剪裁区域东北边的尺寸大小。
&nw&：调整剪裁区域西北边的尺寸大小。
&all&：移动剪裁区域。
该事件在剪裁区域发生改变时触发。
相关的原始事件：mousedown、touchstart。
$('img').on('dragstart.cropper',&function&(e)&{
&&console.log(e.type);&//&dragstart
&&console.log(e.namespace);&//&cropper
&&console.log(e.dragType);&//&...
dragmove.cropper：
event.dragType：和dragstart.cropper相同。
当剪裁区域发生改变时触发。
相关的原始事件：mousemove、touchmove。
dragend.cropper：
event.dragType：和dragstart.cropper相同。
当剪裁区域改变结束时触发。
相关的原始事件：mouseup、mouseleave、touchend、touchleave和touchcancel。
zoomin.cropper：当cropper对象开始放大canvas时触发。
zoomout.cropper：当cropper对象开始缩小canvas时触发。
No conflict：如果你使用了相同名称空间的其它插件，可以通过$.fn.cropper.noConflict方法来修改名称空间。
&script&src=&other-plugin.js&&&/script&
&script&src=&cropper.js&&&/script&
&&$.fn.cropper.noConflict();
&&//&Code&that&uses&other&plugin's&&$().cropper&&can&follow&here.
转载请注明： &
下载地址： |
与本文相关的文章3147972 的BLOG
用户名：3147972
文章数：65
评论数：71
访问量：124983
注册日期：
阅读量：5863
阅读量：12276
阅读量：395204
阅读量：1085985
51CTO推荐博文
博客已转移：& &发现经常有人在技术群里问要PHP图片上传裁切并且预览的例子。今天正好有时间，就亲自做了一个，同时把方法公布出来，让大家可以理解，学会如何用ThinkPHP+jcrop做这个例子。首先先下来jcrop,网址：& &下载完成后，里面有js，demo，css等文件夹.demo里是例子,建议大家先看一下源代码.剩下的,跟我一起来做这个例子:& &1.下载ThinkPHP,然后新建项目,生成项目目录& &2.在Tpl中新建Index/index.html代码如下&!DOCTYPE&HTML&PUBLIC&"-//W3C//DTD&HTML&4.01&Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&
&title&上传图片&/title&
&&&&&function&setFile(f1){
&&&&&&&&document.frm.logoImg.value=f1;
&&&&&/script&
&table&border="0"&align="center"&cellpadding="0"&cellspacing="0"&
&&&&&td&height="45"&align="center"&valign="middle"&
&&&&&&&&&form&action="#"&method="post"&&name="frm"&&请选择上传的图片
&&&&&&&&&&&&&&&input&name="logoImg"&id="logoImg"&&&type="text"&size="30"/&
&&&&&&&&&&&&&&label&style="cursor:hand"&onClick="window.open('__URL__/upimg','上传图片','height=600,width=800,top=200,left=200')"&上传图片&/label&&br/&
&&&&&&&&&/form&
&/html&这是一个上传，在点击上传图片以后，会弹出一个窗口，专门用来上传图片裁切。在Tpl/Index/下新建upimg.html代码如下:&!DOCTYPE&HTML&PUBLIC&"-//W3C//DTD&HTML&4.01&Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&
&meta&http-equiv="Content-Type"&content="text/&charset=utf-8"&
&title&上传图片&/title&
&script&language="javascript"&
&&&&function&$(id){
&&&&&&&&return&document.getElementById(id);
&&&&function&ok(){
&&&&&&&&&$("logoimg").src&=&$("filename").
&table&border="0"&align="center"&cellpadding="0"&cellspacing="0"&
&&&&&td&height="45"&align="center"&valign="middle"&
&&&&&&&&&form&action="__URL__/uploadf?submit=1"&method="post"&enctype="multipart/form-data"&name="form1"&&请选择上传的图片
&&&&&&&&&&&&&input&type="file"&name="filename"&id="filename"&onchange="ok()"&
&&&&&&&&&&&&&!--&MAX_FILE_SIZE&must&precede&the&file&input&field&--&
&&&&&&&&&&&&&input&type="hidden"&name="MAX_FILE_SIZE"&value="30000"&/&
&&&&&&&&&&&&&input&type="submit"&name="Submit"&value="上传"&
&&&&&&&&&/form&
&/html&我没有用TP自带的文件上传类，如果大家需要，可以改下，以上主要就是弹出一个上传文件的窗口，在这个窗口中会完成文件上传，裁切等操作。点击提交到Index/uploadfIndex/uploadf代码如下：$path&=&"uploadfiles/";&&&&&&&&&//图片上传地址
&&&&&&&&&&&&&&&&if&(!&file_exists&(&$path&))&{
&&&&&&&&&&&&&&&&&&&&mkdir&(&"$path",&0700&);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&$tp&=&array&(
&&&&&&&&&&&&&&&&&&&&&&&&"image/gif",
&&&&&&&&&&&&&&&&&&&&&&&&"image/jpeg",
&&&&&&&&&&&&&&&&&&&&&&&&"image/png",
&&&&&&&&&&&&&&&&&&&&&&&&"image/jpg"
&&&&&&&&&&&&&&&&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&if&(!&in_array&(&$_FILES&["filename"]&["type"],&$tp&))&{
&&&&&&&&&&&&&&&&&&&&echo&"格式不对";
&&&&&&&&&&&&&&&&&&&&exit&();
&&&&&&&&&&&&&&&&}&//&END&IF
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&if&($_FILES&["filename"]&["name"])&{
&&&&&&&&&&&&&&&&&&&&$file1&=&$_FILES&["filename"]&["name"];
&&&&&&&&&&&&&&&&&&&&$file2&=&$path&.&time&()&.&$file1;
&&&&&&&&&&&&&&&&&&&&$flag&=&1;
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&if&($flag)
&&&&&&&&&&&&&&&&&&&&$result&=&move_uploaded_file&(&$_FILES&["filename"]&["tmp_name"],&$file2&);
&&&&&&&&&&&&&&&&if&($result)&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&$this-&assign('filename',$file2);
&&&&&&&&&&&&&&&&&&&&$this-&display();
&&&&&&&&&&&&&&&&}上传完成以后会直接跳转到uploadf.html&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&HTML&4.01&Transitional//EN"&"http://www.w3.org/TR/html4/loose.dtd"&
&meta&http-equiv="Content-Type"&content="text/&charset=UTF-8"&
&title&Insert&title&here&/title&
&script&src="__STYLE__/js/jquery.min.js"&&/script&
&script&src="__STYLE__/js/jquery.Jcrop.js"&&/script&
&link&rel="stylesheet"&href="__STYLE__/css/main.css"&type="text/css"&/&
&link&rel="stylesheet"&href="__STYLE__/css/demos.css"&type="text/css"&/&
&link&rel="stylesheet"&href="__STYLE__/css/jquery.Jcrop.css"&type="text/css"&/&
&script&language='javascript'&
&&&&jQuery(function($)&{
&&&&&&&&var&jcrop_api,&boundx,&boundy,
&&&&&&&&$preview&=&$('#preview-pane'),&$pcnt&=&$('#preview-pane&.preview-container'),&$pimg&=&$('#preview-pane&.preview-container&img'),
&&&&&&&&xsize&=&$pcnt.width(),&ysize&=&$pcnt.height();
&&&&&&&&console.log('init',&[&xsize,&ysize&]);
&&&&&&&&$('#target').Jcrop({
&&&&&&&&&&&&onChange&:&updatePreview,
&&&&&&&&&&&&onSelect&:&updatePreview,
&&&&&&&&&&&&aspectRatio&:&xsize&/&ysize
&&&&&&&&},&function()&{
&&&&&&&&&&&&var&bounds&=&this.getBounds();
&&&&&&&&&&&&boundx&=&bounds[0];
&&&&&&&&&&&&boundy&=&bounds[1];
&&&&&&&&&&&&jcrop_api&=&
&&&&&&&&&&&&$preview.appendTo(jcrop_api.ui.holder);
&&&&&&&&});
&&&&&&&&function&updatePreview(c)&{
&&&&&&&&&&&&if&(parseInt(c.w)&&&0)&{
&&&&&&&&&&&&&&&&var&rx&=&xsize&/&c.w;
&&&&&&&&&&&&&&&&var&ry&=&ysize&/&c.h;
&&&&&&&&&&&&&&&&$pimg.css({
&&&&&&&&&&&&&&&&&&&&width&:&Math.round(rx&*&boundx)&+&'px',
&&&&&&&&&&&&&&&&&&&&height&:&Math.round(ry&*&boundy)&+&'px',
&&&&&&&&&&&&&&&&&&&&marginLeft&:&'-'&+&Math.round(rx&*&c.x)&+&'px',
&&&&&&&&&&&&&&&&&&&&marginTop&:&'-'&+&Math.round(ry&*&c.y)&+&'px'
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$('#x').val(c.x);
&&&&&&&&&&&&&&&&$('#y').val(c.y);
&&&&&&&&&&&&&&&&$('#w').val(c.w);
&&&&&&&&&&&&&&&&$('#h').val(c.h);
&&&&&&&&&&&&}
&&&&&&&&function&updateCoords(c){
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&};
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&style&type="text/css"&
.jcrop-holder&#preview-pane&{
&&&&display:&
&&&&position:&
&&&&z-index:&2000;
&&&&top:&10
&&&&right:&-240
&&&&padding:&6
&&&&border:&1px&rgba(0,&0,&0,&.4)&
&&&&background-color:&
&&&&-webkit-border-radius:&6
&&&&-moz-border-radius:&6
&&&&border-radius:&6
&&&&-webkit-box-shadow:&1px&1px&5px&2px&rgba(0,&0,&0,&0.2);
&&&&-moz-box-shadow:&1px&1px&5px&2px&rgba(0,&0,&0,&0.2);
&&&&box-shadow:&1px&1px&5px&2px&rgba(0,&0,&0,&0.2);
#preview-pane&.preview-container&{
&&&&width:&170
&&&&height:&250
&&&&overflow:&
&&&&&div&class="container"&
&&&&&&&&&div&class="row"&
&&&&&&&&&&&&&div&class="span12"&
&&&&&&&&&&&&&&&&&div&class="jc-demo-box"&
&&&&&&&&&&&&&&&&&&&&&img&src="__ROOT__/{$filename}"&id="target"&alt="[Jcrop&Example]"&/&
&&&&&&&&&&&&&&&&&&&&&div&id="preview-pane"&
&&&&&&&&&&&&&&&&&&&&&&&&&div&class="preview-container"&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&img&src="__ROOT__/{$filename}"&class="jcrop-preview"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&alt="Preview"&/&
&&&&&&&&&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&&&&&&&&&div&class="clearfix"&&/div&
&&&&&&&&&&&&&&&&&/div&
&&&&&&&&&&&&&/div&
&&&&&&&&&/div&
&&&&&/div&
&&&&&form&action="__URL__/uploadf?submit=cut"&method="post"&onsubmit="return&checkCoords();"&
&&&&&&&&&&&&&input&type="hidden"&id="x"&name="x"&/&
&&&&&&&&&&&&&input&type="hidden"&id="y"&name="y"&/&
&&&&&&&&&&&&&input&type="hidden"&id="w"&name="w"&/&
&&&&&&&&&&&&&input&type="hidden"&id="h"&name="h"&/&
&&&&&&&&&&&&&input&type="hidden"&name="filename"&value="{$filename}"&
&&&&&&&&&&&&&input&type="submit"&value="Crop&Image"&/&
&&&&&&&&&/form&
&&&&&!--&&&&&&img&src="__ROOT__/{$filename}"&alt=""&/&&--&
&/html&这里的代码比较长，慢慢解释吧，我直接复制的jcrop demo里的tutorial3.html，加载他自己需要的js，css。其中#preview-pane&.preview-container&{
&&&&width:&170
&&&&height:&250
&&&&overflow:&
}这部分CSS会影响到出来的裁切框的比例。以及预览处的大小。$('#target').Jcrop({
&&&&&&&&&&&&onChange&:&updatePreview,
&&&&&&&&&&&&onSelect&:&updatePreview,
&&&&&&&&&&&&aspectRatio&:&xsize&/&ysize
&&&&&&&&},&function()&{
&&&&&&&&&&&&var&bounds&=&this.getBounds();
&&&&&&&&&&&&boundx&=&bounds[0];
&&&&&&&&&&&&boundy&=&bounds[1];
&&&&&&&&&&&&jcrop_api&=&
&&&&&&&&&&&&$preview.appendTo(jcrop_api.ui.holder);
&&&&&&&&});onChange和onSelect处的意思是裁切的时候要执行的js代码，说实话，我js和jq的水平很垃圾。所以不管了。function&updatePreview(c)&{
&&&&&&&&&&&&if&(parseInt(c.w)&&&0)&{
&&&&&&&&&&&&&&&&var&rx&=&xsize&/&c.w;
&&&&&&&&&&&&&&&&var&ry&=&ysize&/&c.h;
&&&&&&&&&&&&&&&&$pimg.css({
&&&&&&&&&&&&&&&&&&&&width&:&Math.round(rx&*&boundx)&+&'px',
&&&&&&&&&&&&&&&&&&&&height&:&Math.round(ry&*&boundy)&+&'px',
&&&&&&&&&&&&&&&&&&&&marginLeft&:&'-'&+&Math.round(rx&*&c.x)&+&'px',
&&&&&&&&&&&&&&&&&&&&marginTop&:&'-'&+&Math.round(ry&*&c.y)&+&'px'
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&$('#x').val(c.x);
&&&&&&&&&&&&&&&&$('#y').val(c.y);
&&&&&&&&&&&&&&&&$('#w').val(c.w);
&&&&&&&&&&&&&&&&$('#h').val(c.h);
&&&&&&&&&&&&}
&&&&&&&&;这个后面我自己加了一个赋值，赋值给form表单中。然后在提交到php完成裁切工作点击提交到uploadf中，可以自己先写一个图片裁切的类:&?php
class&Imgshot&{
&&&&private&$
&&&&private&$
&&&&private&$x;
&&&&private&$y;
&&&&private&$x1;
&&&&private&$y1;
&&&&private&$width&=&170;
&&&&private&$height&=&250;
&&&&private&$jpeg_quality&=&90;
&&&&&*&构造器
&&&&public&function&__construct()&{
//&&&&&&log_message&(&'debug',&"Img_shot&Class&Initialized"&);
&&&&&*&初始化截图对象
&&&&&*&@param
&&&&&*&&&&&&&&&&filename&源文件路径全明
&&&&&*&@param
&&&&&*&&&&&&&&&&width&截图的宽
&&&&&*&@param
&&&&&*&&&&&&&&&&height&截图的高
&&&&&*&@param
&&&&&*&&&&&&&&&&x&横坐标1
&&&&&*&@param
&&&&&*&&&&&&&&&&y&纵坐标1
&&&&&*&@param
&&&&&*&&&&&&&&&&x1&横坐标1
&&&&&*&@param
&&&&&*&&&&&&&&&&y1&横坐标2
&&&&&*&&&&&&&&
&&&&public&function&initialize($filename,&$x,&$y,&$x1,&$y1)&{
&&&&&&&&if&(file_exists&(&$filename&))&{
&&&&&&&&&&&&$this-&filename&=&$
&&&&&&&&&&&&$pathinfo&=&pathinfo&(&$filename&);
&&&&&&&&&&&&$this-&ext&=&$pathinfo&['extension'];
&&&&&&&&}&else&{
&&&&&&&&&&&&$e&=&new&Exception&(&'the&file&is¬&exists!',&1050&);
&&&&&&&&&&&&throw&$e;
&&&&&&&&$this-&x&=&$x;
&&&&&&&&$this-&y&=&$y;
&&&&&&&&$this-&x1&=&$x1;
&&&&&&&&$this-&y1&=&$y1;
&&&&&*&生成截图
&&&&&*&根据图片的格式，生成不同的截图
&&&&public&function&generate_shot()&{
&&&&&&&&switch&($this-&ext)&{
&&&&&&&&&&&&case&'jpg'&:
&&&&&&&&&&&&&&&&return&$this-&generate_jpg&();
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&'png'&:
&&&&&&&&&&&&&&&&return&$this-&generate_png&();
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&case&'gif'&:
&&&&&&&&&&&&&&&&return&$this-&generate_gif&();
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&default&:
&&&&&&&&&&&&&&&&return&
&&&&&*&得到生成的截图的文件名
&&&&private&function&get_shot_name()&{
&&&&&&&&$pathinfo&=&pathinfo&(&$this-&filename&);
&&&&&&&&$fileinfo&=&explode&(&'.',&$pathinfo&['basename']&);
&&&&&&&&$filename&=&$fileinfo&[0]&.&'_small.'&.&$this-&
&&&&&&&&return&'uploadfiles/'.$
&&&&&*&生成jpg格式的图片
&&&&private&function&generate_jpg()&{
&&&&&&&&$shot_name&=&$this-&get_shot_name&();
&&&&&&&&$img_r&=&imagecreatefromjpeg&(&$this-&filename&);
&&&&&&&&$dst_r&=&ImageCreateTrueColor&(&$this-&width,&$this-&height&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&imagecopyresampled&(&$dst_r,&$img_r,&0,&0,&$this-&x,&$this-&y,&$this-&width,&$this-&height,&$this-&x1,&$this-&y1&);
&&&&&&&&imagejpeg&(&$dst_r,&$shot_name,&$this-&jpeg_quality&);
&&&&&&&&return&$shot_
&&&&&*&生成gif格式的图片
&&&&private&function&generate_gif()&{
&&&&&&&&$shot_name&=&$this-&get_shot_name&();
&&&&&&&&$img_r&=&imagecreatefromgif&(&$this-&filename&);
&&&&&&&&$dst_r&=&ImageCreateTrueColor&(&$this-&width,&$this-&height&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&imagecopyresampled&(&$dst_r,&$img_r,&0,&0,&$this-&x,&$this-&y,&$this-&width,&$this-&height,&$this-&x1,&$this-&y1&);
&&&&&&&&imagegif&(&$dst_r,&$shot_name&);
&&&&&&&&return&$shot_
&&&&&*&生成png格式的图片
&&&&private&function&generate_png()&{
&&&&&&&&$shot_name&=&$this-&get_shot_name&();
&&&&&&&&$img_r&=&imagecreatefrompng&(&$this-&filename&);
&&&&&&&&$dst_r&=&ImageCreateTrueColor&(&$this-&width,&$this-&height&);
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&imagecopyresampled&(&$dst_r,&$img_r,&0,&0,&$this-&x,&$this-&y,&$this-&width,&$this-&height,&$this-&x1,&$this-&y1&);
&&&&&&&&imagepng&(&$dst_r,&$shot_name&);
&&&&&&&&return&$shot_
?&这个是我在网上down的.~没自己写,自己可以根据需求扩展一下.裁切操作:&&&&$filename=$this-&cut();
&&&&&&&&&&&&&&&&echo&"&script&language='javascript'&";
&&&&&&&&&&&&&&&&echo&"alert(\"上传成功！\");";
&&&&&&&&&&&&&&&&echo&"&/script&";
&&&&&&&&&&&&&&&&echo&("&input&type=\"button\"&name=\"Submit\"&value=\"确定\"&onClick=\"window.opener.setFile('"&.$filename.&"');window.close();\"&");
&&&&&&&&&&&&&&&&echo&'&img&src="'.__ROOT__.'/'.$filename.'"&alt=""&/&';
//裁切的方法
&&&&function&cut(){
&&&&&&&&import('ORG.Net.Imgshot');
&&&&&&&&$imgshot=new&Imgshot();
&&&&&&&&$imgshot-&initialize(SITE_PATH.'/'.$_REQUEST['filename'],&$_REQUEST['x'],&$_REQUEST['y'],&$_REQUEST['x']+$_REQUEST['w'],&$_REQUEST['y']+$_REQUEST['h']);
&&&&&&&&$filename=$imgshot-&generate_shot();
&&&&&&&&return&$
&&&&}完成以后会直接echo出最后裁切的图片，并且还有一个确定按钮，点击确定以后，则会把裁切后图像的地址返回到最一开始的input[type="text"]。整个例子我还没有完善，大家可以根据需要自己去理解和完善。好了，如果不会的朋友可以加群:问我。整个例子我已经发布到ThinkPHP的官网，大家可以下载。/topic/9154.html本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)
