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

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

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

 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('<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>必须小于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.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);
}
});
});
}
});
});
});

完整代码：

rush:js;"> T<a href="https://www.jb51.cc/tag/odo/" target="_blank" class="keywords">odo</a> supply a title <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width">

  <input name="files" type="file" multiple />
  <button id="btn"&gt;<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a></button>
</div>
<div id="images"&gt;

  <p style="margin-top: 40px;"&gt;</p>

  <div id="img2" ></div>

  <div id="img3"&gt;</div>
</div>

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

jQuery 图片上传裁剪裁剪预览预览

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

相关文章