以下全部为手写,禁止转帖。
Jcorp是很好用的Jquery 截图插件,兼容chrome firfox。
Demo地址是:http://code.ciaoca.com/jquery/jcrop/demo/
现在用Jcorp + php 实现截图+上传,从上面地址下载 js,css文件引入。如果没有引入css则会出现选框无法移动,无边框等情况。具体参数参考以上网址手册。
我的初始化配置是这样的
function initLogoJcrop(modal){
//modal为弹层对象,
modal.find('img.preview').Jcrop({
//设置画布宽度为568
boxWidth:568,
onChange:function(res){
//当选框位置改变时记录选框的值(实际尺寸)
// 这里时实际尺寸,这里是个坑,页面显示图片和上传图片有可能不是一个尺寸
logoChangeLoc = this.tellSelect();
widgetSize = this.getBounds();
//console.log(widgetSize);
//console.log(logoChangeLoc);
}
},function(){
jcrop_api = this;
jcrop_api.animateTo([0,0,568,0]);
jcrop_api.setOptions({ aspectRatio: 1/1 });
jcrop_api.setOptions({ allowSelect: true });
jcrop_api.setOptions({ allowMove: true });
jcrop_api.setOptions({ allowResize: true });
jcrop_api.setOptions({ trackDocument: false });
});
}
具体参数查看手册,这里就不介绍了。当实例化完插件后,当触发事件后,把图片和截取图片当位置,图片尺寸信息通过ajax上传服务器。参数代码如下:
//验证完图片格式后,把参数都放到formdata中,widgetSize为数组,传到服务器应该是字符串,后端注意转化,file为input.val();
var formData = new FormData();
formData.append('widgetSize',widgetSize);
formData.append('file','');
formData.append('imgSize',logoChangeLoc);
以下是php处理代码,这里我不用类库了,直接php原生写给大家看。代码如下:
//判断图片格式
//获取参数
//移动图片到目录
move_uploaded_file($tmp,$filePath.$imgname);
imggdAction($filePath.$imgname,$filePath,json_decode($size,true),$widgetSize); //$size为截取图片的尺寸位置信息,widgetSize为图片真实尺寸
function imggdAction($path,$filePath,$size,$widgetSize){
$widgetSize = explode(',',$widgetSize);
$sizeInfo = getimagesize($path); //获取图片信息
$imgWidth = $widgetSize[0];
$imgHeight = $widgetSize[1];
$mime = $sizeInfo['mime']; //类型
$fileextArray = explode('/',$mime);
$fileext = $fileextArray[1]; //图片后缀
$ext2functions = array(
'jpg' => 'imagecreatefromjpeg',
'jpeg' => 'imagecreatefromjpeg',
'png' => 'imagecreatefrompng',
'gif' => 'imagecreatefromgif'
);
//获取图片资源
$currentImg = call_user_func($ext2functions[$fileext], $path);
//缩略图真图
$dest_img = imagecreatetruecolor($imgWidth,$imgHeight);
//生成缩略图
imagecopyresampled($dest_img, $currentImg, 0, 0, 0, 0, $imgWidth, $imgHeight, $imgWidth, $imgHeight);
unlink($path); //删除原图
imagedestroy($currentImg); //销毁原图
// 调整默认颜色
$color = imagecolorallocate($dest_img, 255, 255, 255);
imagefill($dest_img, 0, 0, $color);
$imgname = time().rand(100,999).'.jpeg';
//imagejpeg($dest_img,$filePath.$imgname,100);
//裁剪
//x:左上角x坐标,y:左上角y坐标,x2:右下角横坐标,y2:右下角纵坐标,w截取图片宽,h截取图片高
//生成截图真图
$dest_img1 = imagecreatetruecolor($size['w'],$size['h']);
//imagecopyresampled($dest_img, $currentImg, 0, 0, $x, $y, $width, $height, $w, $h);
imagecopyresampled($dest_img1, $dest_img, 0, 0, $size['x'], $size['y'], $size['w'], $size['h'], $size['w'], $size['h']);
$color = imagecolorallocate($dest_img1, 255, 255, 255);
imagefill($dest_img1, 0, 0, $color);
imagedestroy($dest_img); //销毁缩略图真图
$imgname = time().rand(100,999).'.jpeg';
imagejpeg($dest_img1,$filePath.$imgname,100);
imagedestroy($dest_img1); //截图真图
return $filePath.$imgname;
}