最近需要上传剪下来的图片。我想起以前我公司用过的一个插件，但是不知道它的名字。

我在网上搜索了一段时间，终于找到了这个网站。

http://www.croppic.net/

因为官网所有的文档都是英文的，大概80%左右看起来有点难懂。但是由于缺乏详细的案例描述，真正的配置还是很困难的。

如果完全按照官网文档的步骤，大概是这样的

下载并安装

官网提供两种下载方式，第一种类似于SDK的全网站，另一种是croppic的简洁版。前者提供了完整的项目结构和前端案例，而后者只有三个文件：croppic.css、croppic.js和croppic.min.js

基本用途

//CSS part # YorID { width : 200 px；高度： 150像素；位置：相对；/*或固定或绝对*/}//html部分中的div id=' your id '/div//js部分中的var选项=[uploadurl3360 '图片上传地址'，cropUrl: '裁剪后图片发送地址'，//等参数配置信息]；var cropperHeader=new Croppic(' your id '，options)；选项参数

上传网址

UploadUrl: '制作上传地址'，uploaddata : { ' dummy data ' 33601，' dummydata 2' :' text'}在用PHP处理时与普通上传文件完全相同。使用$_FILES['img']可以直接获取文件信息，上传保存。使用$_REQUEST[]可以直接获取js中uploadData中的数据。

处理后，php根据成功状态返回如下json结构

论成功

{'status' :' success '，' url' : '成功后返回图片的url地址'，' width':源图片宽度，' height':源图片高度}注意：源图片的宽度和高度获取方法List ($ width，$ height)=GetImageSize ($ _ files [

失败时

{'status' :' error '，' message' : '这是您的失败消息' } cropUrl

接下来是切图的请求，基本都用上了

var cropper options={ uploadurl : '剪切后请求的地址'，uploaddata : { ' dummy data ' 33601，' dummy data 2 ' : ' text ' } } var cropper标头=new cropper ('yourid '，cropper options)；请求php的参数基本如下：

Php使用nezamy/route的请求类来获取croppic.js发送的参数

$ request=app(' request ')；//上传服务器的镜像路径$ imgur=$ request-body[' imgur ']；//原始图片宽度和高度$ imginitw=$ request-body[' imginitw ']；$ IMginith=$ request-body[' IMginith ']；//新缩放图片的宽度和高度$ IMgw=$ request-body[' IMgw ']；$ IMgh=$ request-body[' IMgh ']；//$ imgY1=$ request-与缩放图像相关的裁剪图像左上角的body[' imgY1 ']；$ IMGx1=$ request-body[' IMGx1 ']；//剪切图像宽度和高度$ cropW=$ request-body[' cropW ']；$ cropH=$ request-body[' cropH ']；//Angle $ Angle=$ request-body[' rotation ']；

不需要引入其他参数。你可以在文件上看到它们。如果看不懂或者不清楚，可以直接下载案例参考，比文档更详细。下一个主要事件是php端的处理。

PHP操作图片GD库

$temp_name='crop_temp_ ' .uniqid()；$temp_path=sys_get_temp_dir().'/';$ output _文件名=$temp_path .$ temp _ name $ what=getimagesize($ IMgurl)；//创建画布并载入图像switch(strtolow($ what[' mime ']){ case ' image/png ' : $ source _ image=imagecreatefrompng($ IMgurl)；$type=' .png '；打破；case ' image/JPEG ' : $ source _ image=imagecreatefrom JPEG($ IMgurl)；$type=' .“JPEG”；打破；case ' image/gif ' : $ source _ image=imagecreatefrom gif($ IMgurl)；$type=' .gif '；打破；默认值：引发新异常('不支持的图片类型');}if(！是_可写(目录名($ output _ filename)){ 0抛出新建异常('文件无法写入');}//创建一幅真彩色的图像，从而支持更为丰富的色彩，gif文件不可使用$ resizedImage=imagecreatetrue color($ IMgw，$ IMgh)；if ($type==' .png') { //将黑色定义为透明色imagecolor transparent($ resizedImage，imagecolor allocate($ resizedImage，0，0，0))；} imagecopyressaged($ resizedImage，$source_image，0，0，0，$imgW，$imgH，$imgInitW，$ imgInitH)；//旋转图像$rotated_image=$angle？imagerotate($resizedImage，-$angle，0): $ resizedImage；//获取图像宽高$ rotated _ width=imagesx($ rotated _ image)；$ rotated _ height=imagesy($ rotated _ image)；//旋转后-缩放后$ dx=$ rotated _ width-$ IMgw；$ dy=$ rotated _ height-$ IMGH；//裁剪旋转后的图片到图像$ cropped _ rotated _ image=imagecreatetrue color($ IMgw，$ IMgh)；if ($type==' .png') { //设置黑色为透明imagecolor透明($裁剪_旋转_image，imagecolor allocate($裁剪_旋转_image，0，0，0))；} imagecopy重采样($ cropped _ rotated _ image，$rotated_image，0，0，$dx/2，$dy/2，$imgW，$imgH，$imgW，$ IMGh)；//剪切图像到规定区域$ final _ image=imagecreatetrue color($ cropW，$ cropH)；if ($type==' .png '){ image color transparent($ final _ image，image color allocate($ final _ image，0，0))；} imagecopy resholded($ final _ image，$裁剪_旋转_ image，0，0，$imgX1，$imgY1，$cropW，$cropH，$cropW，$ cropH)；//最后输出图像到文件，就可以直接使用file _ get _ content(' output _ filename ').$type)获取图片了imagepng($final_image，$output_filename).$ type)；/** * 这里需要进行上传服务器操作*/echo JSON _ encode([' status '=' success '，' url'=$output_filename .$type，])；//最后删除缓存图片//取消链接($output_filename).$ type)；

射流研究…各种配置

var crop _ image _ src=' image _ src var croppendoptions={ cro purl : ' http://Deng。com/m/tool/crop _ pic/crop '，modal: true，doubleZoomControls: false，enableMousescroll: true，imgEyecandyOpacity: 0.4，rotateFactor: 90，zoomFactor: 20，outputUrlId: ' image _ input '，//loadPicture:加載圖片，processInline: true，LoadErhTMl : ' div class=' Loader Bullingg ' span id=' Bullingg _ 1 '/span id=' Bullingg _ 2 '/span id=' Bullingg _ 3 '/span/div '，onbeforeimgupload : function(){ crop _ image _ src=$(' # image _ input ').val()；}，onAfterRemoveCroppedImg:函数(){ var res=confirm('您是要使用原图还是清除图片？nr[确认]使用原图，[取消]清除图片');if (res) { $('#image_input ')).val(crop _ image _ src)；$(' # cropcontainereycandy ').prepend(' img class=' croppedImg ' src=' crop _ image _ src ' width=' 100% ')；} else { $('#image_input ').val(" ")；$('.'' croppedImg ' .移除();} }，onReset:函数(){ var res=confirm('您是要使用原图还是清除图片？nr[确认]使用原图，[取消]清除图片');if (res) { $('#image_input ')).val(crop _ image _ src)；$(' # cropcontainereycandy ').prepend(' img class=' croppedImg ' src=' crop _ image _ src ' width=' 100% ')；} else { $('#image_input ').val(" ")；} }，onError:函数(错误消息){ alert(' onerror : '错误消息)} }；var cropperBox=new Croppic(' cropcontainereycandy '，croppedOptions)；总结

以上就是php croppic.js实现图片剪切上传功能的介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！