jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

网页端 裁剪图片，不需要经过服务器。

这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop.

高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。

核心代码：

    var el = $('input').get(0);
     
     seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){
     
    FileAPI.event.on(el, 'change', function (evt){
      var files = FileAPI.getFiles(evt); // Retrieve file list
 
      FileAPI.filterFiles(files, function (file, info){
 if( !/^image/.test(file.type)  ){
   alert('图片格式不正确');
   return false;
 }
 else if(file.size > 20 * FileAPI.MB){
   alert('图片必须小于20M');
    return false;
 }
 else{
   return true;
 }
 
      }, function (files, rejected){
 console.log(files);
  
 if( files.length ){
   var file = files[0];
    var img0 = FileAPI.Image(file);
    var img1 = FileAPI.Image(file);
    var ratio = 0;
   FileAPI.getInfo(file, function (err, info) {  //get image ratio
if (!err) {
  if (info.width > info.height) {
    ratio = info.width / 500;
  }
  else {
    ratio = info.height / 500;
  }
}
     });
 
     img0.resize(500, 500, 'max')   //place image and register jcrop
  .get(function(err, img) {
    $('#img2').empty();
    $('#img2').append($(img));
 
    $('#img2').children().Jcrop({
      aspectRatio: 1,
      bgColor: 'rgba(0,0,0,0.4)',
      onSelect: function(c) {
 img1.matrix.sx = c.x * ratio;
 img1.matrix.sy = c.y * ratio;
 img1.matrix.sw = c.w * ratio;
 img1.matrix.sh = c.h * ratio;
 img1.matrix.dw = 500;
 img1.matrix.dh = 500;
 
 img1.get(function(err, img) {
   // $('#img3').empty();
   //   $('#img3').append($(img));
   $('#img3').html($(img));
 });
 
      }
    });
  });
    $('#btn').on('click',function(){
   FileAPI.upload({
//     url: '/testUpFile/upFile',
     // headers: { 'Content-Type': 'multipart/form-data' },
     files: { images: img1 },
     progress: function (evt){  },
     complete: function (err, xhr){ 
//alert(xhr.responseText);
console.log(xhr);
     }
   });
    });
   }
 });
      });
  });

完整代码：

  
    
    
    
      
    
    
  
  
    
    .upload-btn {
  width: 130px;
  height: 25px;
  overflow: hidden;
  position: relative;
  border: 3px solid #06c;
  border-radius: 5px;
  background: #0cf;

}
  .upload-btn:hover {
    background: #09f;
  }
  .upload-btn__txt {
    z-index: 1;
    position: relative;
    color: #fff;
    font-size: 18px;
    font-family: "Helvetica Neue";
    line-height: 24px;
    text-align: center;
    text-shadow: 0 1px 1px #000;
  }
  .upload-btn input {
    top: -10px;
    right: -40px;
    z-index: 2;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 50px;
  }
    
  
 
  
  
    
    
    

      
      上传
    
    
 
      

      
      
      
      
    

  

  
  
  
  

以上所述就是本文的全部内容了，希望大家能够喜欢。