首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 22, 2015

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

这个是用 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插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
神奇！js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
javascript解三阶幻方（九宫格）
Apr 22 #Javascript
javascript递归回溯法解八皇后问题
Apr 22 #Javascript
使用C++为node.js写扩展模块
Apr 22 #Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 #Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 #Javascript
jscript读写二进制文件的方法
Apr 22 #Javascript
javascript格式化json显示实例分析
Apr 21 #Javascript
低放电路(1) H-501(1) BCL3000(2) PL450(1) ICF-SW07(1) PL550(1) PL990(2) 乐信(1) ICF-SW7600(1) S700(1)
You might like
简单易用的计数器（数据库）
2006/10/09 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
微信小程序实战之轮播图（3）
2017/04/17 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Python常用特殊方法实例总结
2019/03/22 Python
django中的数据库迁移的实现
2020/03/16 Python
Nike台湾官方商店：Nike.com (TW)
2017/08/16 全球购物
编程输出如下图形
2013/11/24 面试题
大学军训自我鉴定
2013/12/15 职场文书
医院门卫岗位职责
2013/12/30 职场文书
法制报告会主持词
2014/04/02 职场文书
停车场管理协议书范本
2014/10/08 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
电子商务实训报告总结
2014/11/05 职场文书
护士个人总结范文
2015/02/13 职场文书