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

2019-11-20 12:37:20

字体：大中小

来源：转载

供稿：网友

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

这个是用 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);                          }                        });                                });          }        });      });  });

完整代码：

<!DOCTYPE html><html>  <head>    <title>TODO supply a title</title>    <meta charset="UTF-8">    <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>

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

上一篇：jQuery图片特效插件Revealing实现拉伸放大

下一篇：javascript解三阶幻方（九宫格）