jcrop+Fileapi圖片上傳裁剪外掛使用簡單介紹

antzone發表於2017-04-05
API

本章節分享一下jQuery外掛jcrop+Fileapi完美實現圖片上傳+裁剪+預覽的程式碼，非常的簡單實用。

網頁端 裁剪圖片，不需要經過伺服器。

這個是用 https://github.com/mailru/FileAPI 框架實現的。配合jcrop。

高階瀏覽器 使用 canvas 裁剪，ie6 7 8使用 flash過度。

核心程式碼:

[JavaScript] 純文字檢視 複製程式碼
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);
            }
          });              
        });
      }
    });
  });
});

完整程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<meta name="viewport" content="width=device-width">
<script src="jquery.min.js"></script>  
<script src="jcrop/jquery.Jcrop.min.js"></script>
<link href="jcrop/jquery.Jcrop.min.css" rel="stylesheet">
</head>
<style>
.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;
}  
</style> 
<body>
<div>
   <!-- "js-fileapi-wrapper" -- required class -->
   <div class="js-fileapi-wrapper upload-btn" id="choose">   
     <input name="files" type="file" multiple />
     <button id="btn">上傳</button>
   </div>
   <div id="images">
     <p style="margin-top: 40px;"></p>
     <div id="img2" ></div>  
     <div id="img3"></div>
   </div>
</div>
<script>window.FileAPI = { staticPath: './fileapi/' };</script>
<script src="./fileapi/FileAPI.min.js"></script>
<script>
var el = $('input').get(0);
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){
    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',
        files: { images: img1 },
        progress: function (evt){ /* ... */ },
        complete: function (err, xhr){ /* ... */
          //alert(xhr.responseText);
        }
      });
    });
  }
});});
</script>
</body>
</html>

相關文章