下面是JS代码:
functionchange_image(file){
varreader=newFileReader();
reader.onload=function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
//$('#target').css({"height":"600px","width":"600px"});
//限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);
varjcrop_api,boundx,boundy;
setTimeout(function(){
$('#target').Jcrop({
minSize:[48,48],
setSelect:[0,0,190,190],
onChange:updatePreview,
onSelect:updatePreview,
onSelect:updateCoords,
aspectRatio:1
},
function(){
//UsetheAPItogettherealimagesize
varbounds=this.getBounds();
boundx=bounds[0];
boundy=bounds[1];
//StoretheAPIinthejcrop_apivariable
jcrop_api=this;
});
functionupdatePreview(c){
if(parseInt(c.w)>0)
{
varrx=48/c.w;//小头像预览Div的大小
varry=48/c.h;
$('#preview').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'
});
}
{
varrx=199/c.w;//大头像预览Div的大小
varry=199/c.h;
$('#preview2').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'
});
}
};
functionupdateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
},500);
}
这里稍作两点提醒:
其一:不要忘记在页面头部引入插件:
其二:有些人眼尖的话可能看到了JS里有个定时,同时心理是不是很疑惑这不是有点多此一举吗?其实不是,上传图片到JS加载到页面上,是需要时间的,这个定时的意义在于
等到图片被JS加载到页面上时才去加载裁剪效果,这里也是反复实验后得出的做法。
后端PHP处理我用的是THINKPHP框架,版本是3.1.3
贴上代码:
functioncrop_deal(){
ob_clean();
import('ORG.Net.UploadFile');
$upload=newUploadFile();
$upload->maxSize=2000000;
$upload->allowExts=array(
'jpg',
'gif',
'png',
'jpeg'
);
$upload->savePath='./upload/test/';
$upload->autoSub=true;
$upload->subType='date';
$upload->dateFormat='Ymd';
if($upload->upload()){
$info=$upload->getUploadFileInfo();
$new_path="./upload/test/thumb".date('Ymd');
$file_store=$new_path."/".date('YmdHis').".jpg";
if(!file_exists($new_path)){
mkdir($new_path,0777,true);
}
$source_path="http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
$img_size=getimagesize($source_path);
$width=$img_size[0];
$height=$img_size[1];
$mime=$img_size['mime'];
$srcImg=imagecreatefromstring(file_get_contents($source_path));
$cropped_img=imagecreatetruecolor($_POST['w'],$_POST['h']);
//缩放
//imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
//裁剪
imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
header("Content-Type:image/jpeg");
imagejpeg($cropped_img,$file_store);
imagedestroy($srcImg);
imagedestroy($cropped_img);
}
}
这里就是调用GD库里创建图像的一系列方法,最重要就是imagecopy(),它是将原图按规定的裁剪位置,裁剪大小复制到新的图片上去,这也说明了一件事,页面用户在裁剪图片
的时候其实前端并没有对图片操作,而是得到裁剪时的坐标位置,裁剪大小,然后提交到PHP操作!!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Swift能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。