ajaxfileupload&cropper实现图片上传与在线编辑

 前几天做了个头像上传&编辑的功能,现在发出来,其实做法都是百度后拼起来的,哈哈,效果如下图

 

首先原理就是:用ajaxfileuplad先反图片上传了,再用cropper实现在线剪切,然后记下各个坐标,用户提交后在后台根据这些坐标对图片进行剪切

特别要注意的是:ajaxfileupload用到了jquery,而cropper用到了prototype,因为它们都用到了相同的$方法名,所以我们首先要解决这两个库之间的冲突,

 

//记得一定要先导入jquery库

<script type="text/javascript" src="<?php echo $_BASE_DIR . 'public/js/jquery.js' ;?>" charset="UTF-8"></script>

//我已经把ajaxfileuplad库中所有的$换成jQuery了
<script type="text/javascript" src="<?php echo $_BASE_DIR . 'public/js/ajaxfileupload.js' ;?>" charset="UTF-8"></script>

//这里是关键,把jquery中的$定义一个别名jQuery
<script type="text/javascript">
var jQuery = $;
</script>

//导入cropper相关的库
<script type="text/javascript" src="<?php echo $_BASE_DIR . 'public/js/prototype.js';?>" charset="UTF-8"></script>
<script type="text/javascript" src="<?php echo $_BASE_DIR . 'public/js/scriptaculous.js?load=builder,dragdrop';?>" charset="UTF-8"></script> 
<script type="text/javascript" src="<?php echo $_BASE_DIR . 'public/js/cropper.js';?>" charset="UTF-8"></script>

 //以下脚本实现了文件上传

 <script type="text/javascript" charset="UTF-8">
jQuery(document).ready(function(){
 jQuery("#upload").click(function(){
  jQuery.ajaxFileUpload({
   url:"<?php echo url('member::profile/uploadimage');?>",
   secureuri:false,
   fileElementId:'file',
   dataType: 'json',
   success: function (data, status)
   {
    if(typeof(data) != 'undefined')
    {
     if(typeof(data.success) != 'undefined')
     {
      jQuery("#imgview").empty().append("<img src='" + data.success +"' id='myImage' width='300' heigth='420' />");
      jQuery("#imgurl").val(data.success);
      doImage();
      jQuery("#submit").attr("disabled",false);
     }
     else
     {
      alert(unescape(data.msg));
     }
    }
   },
   error: function (data, status, e)
   {
    alert('图片上传失败,请重新上传,如问题无法解决,请联系客服');
   }
  });
 });
});
</script>

//文件上传的后台PHP代码

QLog::log('start to load image');
  $time = time();
  try{
   $uploader = new Helper_Uploader();
   $file = $uploader->file('image');
   if($file->isSuccessed())
   {

    if($file->isValid('jpg, jpeg, png,gif'))
    {
     $filepath = $this->_app->config('ROOT_DIR'). '/public/uploads/' . date('Ym');
     if(!file_exists($filepath))
     {
      mkdir($filepath);
     }
     if(file_exists($filepath.'/'.$file->filename()))
     {
      unlink ( $filepath.'/'.$file->filename() );
     }
     $file->move($filepath.'/'.$time.$file->filename());
     $retVal = "{success:'" .'/public/uploads/' . date('Ym') .'/'.$time.$file->filename() . "'}";
     QLog::log('retVal:'.$retVal);
     return $retVal;

    } else {
     echo "{msg:'图片格式不正确,您只能上传jpg, jpeg, png,gif图片'}";
    }

   } else{
    echo "{msg:'文件上传失败,请重新上传'}";
   }
  }catch (Exception $ex)
  {
   echo "{msg:'文件上传失败,请重新上传'}";
  }

 

//以下脚本实现了图片的在线剪切

<script type="text/javascript" charset="utf-8">

function onEndCrop( coords, dimensions ) {
 $( 'x1' ).value = coords.x1;
 $( 'y1' ).value = coords.y1;
 $( 'x2' ).value = coords.x2;
 $( 'y2' ).value = coords.y2;
 $( 'width' ).value = dimensions.width;
 $( 'height' ).value = dimensions.height;
}
function doImage() {
 new Cropper.ImgWithPreview(
 'myImage',
 {
  minWidth: 80,
  minHeight: 80,
  ratioDim: { x: 200, y: 200 },
  displayOnInit: true,
  onEndCrop: onEndCrop,
  previewWrap: 'previewArea'
 }
 )
}
</script>

//图片剪切后台处理代码

//获得图像的URL
  $img_url = $this->_context->imgurl;

  $img = Helper_Image::createFromFile($this->_app->config('ROOT_DIR').$img_url,'jpg');

  $time = time();
  $user_id = $_SESSION[Q::ini('acl_session_key')]['id'];

  $avatar_name = $time.$user_id.'.gif';

  $avatar_url = $this->_app->config('ROOT_DIR'). '/public/uploads/img/'.$avatar_name;

  //左上角坐标
  $pos_x = $this->_context->x1;
  $pos_y = $this->_context->y1;

  //长,高
  $width = $this->_context->width;
  $height = $this->_context->height;

  try{
   //先缩放到固定长宽
   $img->resampled(300,420);
   //再剪切指定区域
   $img->crop_absolute($width,$height,$pos_x,$pos_y);
   //再缩放至头像大小
   $img->resampled(80,80);
   $img->saveAsGif($avatar_url);
   $img->destroy();
  }catch(Exception $ex)
  {
   return $this->_redirectMessage('文件保存失败','',url('member::profile/image'));
  }
  //更新用户头像链接
  $user = User::find('id=?',$user_id)->query();

  $old_avatar_url = $user->info->avatar_url;

  //删除旧的头像
  if($old_avatar_url)
  {
   try{
    unlink($this->_app->config('ROOT_DIR'). '/public/uploads/img/'.$old_avatar_url);
   }
   catch(Exception $ex)
   {
    //忽略删除异常
   }
  }

  $user->info->avatar_url = $avatar_name;

  $user->save();

  return $this->_redirect(url('member::profile/image'));

 

//页面html代码

    <div id="exist_avatar">
      <h5>当前头像</h5>
      <img src="<?php echo $_BASE_DIR.'public/uploads/img/'.$user->info->avatar_url;?>">
    </div>
    <div id="profile_detial">
       <fieldset>
         <DL>
           <DD><input type="file" id="file" name="image"></DD>
           <DD><input type="button" value="上传" id="upload"></DD>
           <DD>你可以编码你上传的图片大小,尺寸为50*50像素</DD>
         </DL>
       </fieldset>
    </div>
    <div id="imgview" style="float:left;margin-left:230px;"></div>
 <div id="previewArea" style="float:left;margin-left:10px;"></div>

//记录各个坐标
<form name="img_form" method="POST" action="<?php echo url('member::profile/saveImg');?>">
 <input type="hidden" name="imgurl" id="imgurl">
 <input type="hidden" name="x1" id="x1" />
 <input type="hidden" name="y1" id="y1" />
 <input type="hidden" name="x2" id="x2" />
 <input type="hidden" name="y2" id="y2" />
 <input type="hidden" name="width" id="width" />
 <input type="hidden" name="height" id="height" />
 <input id="submit" type="submit" value="保存" disabled="true">
</form>