laravel--jcrop--上传切图
0x00 加载基本的js
<script src="/js/jquery-2.2.2.min.js"></script> <script src="/plugin/layer/layer.js"></script> <script src="/plugin/jcrop/js/jquery.Jcrop.js"></script> <script src="/js/upLoadFile.js"></script>
0x01 加载html
<a href="javasript:;" class="imgclick" onclick="uploadimg()">点击上传照片</a>
<img id="img_preview" src="/images/1.jpg" width="500px" height="400px" />
<input type="file" name="file" id="id" nullmsg="请上传图片" style="display: none;" onchange="return uploadimg('id','images', 'img_preview',{ _token:'{!! csrf_token() !!}'} );" />
<div id="preview-pane">
<div class="preview-container">
<img src="/images/1.jpg" class="jcrop-preview" alt="Preview" />
</div>
</div>
<div class="avatarupload" value=""></div>
<button class="avatarbutton">提交</button>0x02 加载额外的js
//上传照片js
function uploadImageToServer(fileElmId, type, id)
{
var data = arguments[3]?arguments[3]:'';
var src = $("#"+id).attr("src");
$("#"+id).attr("src", "/images/loading.gif");
$.ajaxFileUpload({
url: '/service/upload/' + type,
fileElementId: fileElmId,
dataType: 'json',
data : data,
success: function (data)
{
if ( result.status != 0 ) {
$("#"+id).attr("src", src);
layer.msg(result.message, {icon:2, time:2000});
} else {
$("#"+id).attr("src", result.uri);
layer.msg(result.message, {icon:1, time:2000});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
alert(errorThrown);
}
});
return false;
}
//剪切照片js
function avatarimg(target,preview,pcnt,pimg)
{
var jcrop_api,
boundx,
boundy,
$preview = $('' + preview + ''),
$pcnt = $('' + pcnt + ''),
$pimg = $('' + pimg + ''),
$target = $('' + target + ''),
xsize = $pcnt.width(),
ysize = $pcnt.height(),
targetw = $target.width(),
targeth = $target.height();
console.log('init',[xsize,ysize]);
$('' + target + '').Jcrop({
onSelect: updatePreviewSelect,
onChange: updatePreview,
aspectRatio: xsize / ysize
},function(){
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this
$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',
});
}
};
function updatePreviewSelect(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',
});
}
// console.log(rx);
// console.log(ry);
// console.log(xsize);
// console.log(ysize);
// console.log(c.w);
// console.log(c.h);
// console.log(boundx);
// console.log(boundy);
// c.w 实际截屏宽度
// c.h 实际截屏高度
// xsize 缩放宽度
// ysize 缩放高度
// boundx 原图压缩成宽
// boundy 原图压缩成高
if($(".avatarupload").length != 0 )
{
var _avatar = $(".avatarupload");
$(_avatar).val(''+ c.x +',' + c.y + ',' + c.w + ',' + c.h + ',' + targetw + ',' + targeth + ','+ xsize + ',' + ysize + '');
console.log(_avatar.val());
}
}
}
//触发功能js
//上传照片
function uploadimg()
{
$('#input_id').click();
}
//ajax提交信息
$(".avatarbutton").on('click',function(){
console.log($(".avatarupload").val());
$.myajax(
'api/post/avatarupload',
'post',
{
imgurl : $("#img_preview").attr('src'),
imgdata: $(".avatarupload").val(),
_token : "{!! csrf_token() !!}"
},
function(data){
console.log(data);
}
);
});
//初始化jcrop
avatarimg('#img_preview','#preview-pane','.preview-container','.jcrop-preview');
//同步所有的照片
setInterval(function(){
$(".jcrop-preview").attr('src',$("#img_preview").attr('src'));
$(".jcrop-holder img").attr('src',$("#img_preview").attr('src'));
},500);0x03 上传文件后台处理局部代码
$file_error = $_FILES["file"]["error"];
if ( $file_error != 0 )
{
switch($file_error)
{
case 1 : $error = "文件大小超过php.ini系统限定";break;
case 2 : $error = "文件大小超过nginx的MAX_FILE_SIZE指定值";break;
case 3 :
case 4 :
case 5 : $error = "文件上传失败";break;
default: $error = '请上传正确的照片';break;
}
$error = "上传记录 : ".$error;
Log::info("$error");
return $result->toSave(0,'',"$error");//返回错误信息
}
$width = $request->input('width','');
$height= $request->input('height','');
$file = $request->input('file');
$imagetype = ['image/gif','image/jpg','image/png','image/pjpeg','image/ico','image/jpeg'];
//判断是否为image
if ( in_array($_FILES['file']['type'],$imagetype))
{
//做逻辑判断和写入服务器
}0x04 上传图片剪切后台处理
public function avatarupload(Request $request)
{
$result = new Result;
$imgdata = $request->input('imgdata','');
$imgurl = '.'.$request->input('imgurl','');
$imgdata = explode(',',$imgdata);
//传裁切参数
$o_img = getimagesize($imgurl);
$aspectRatiow = $o_img[0]/intval($imgdata[4]);
$aspectRatioh = $o_img[1]/intval($imgdata[5]);
$x = $imgdata[0]*$aspectRatiow;
$y = $imgdata[1]*$aspectRatioh;
$w = $imgdata[2]*$aspectRatiow;
$h = $imgdata[3]*$aspectRatioh;
$targ_w = intval($imgdata[6]);
$targ_h = intval($imgdata[7]);
//切图
$jpeg_quality = 90;
@$img_r = imagecreatefromjpeg($imgurl);
if (empty($img_r)) {
@$img_r = imagecreatefromgif($imgurl);
}
if (empty($img_r)) {
@$img_r = imagecreatefrompng($imgurl);
}
if (empty($img_r)) {
@$img_r = $this->_imageCreateFromBMP($imgurl);
}
if (empty($img_r)) {
return $result->toSave(0,"","照片格式只支持jpg,gif,png,bmp");
}$dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); imagecopyresampled($dst_r,$img_r,0,0,$x,$y,$targ_w,$targ_h,$w,$h); //替换原照片 imagedestroy($img_r); imagejpeg($dst_r,$imgurl); $result->imgurl = $imgurl; $result->imgdata = $imgdata; return $result->toSave(1,"ok","");//返回信息 }
叶云梦天
叶云梦天，专注微信，小程序，服务器管理，数据分析的信息博客
