码迷，mamicode.com
首页 > Web开发 > 详细

基于Jcrop的图片上传裁剪加预览

时间：2016-05-04 17:11:59      阅读：173      评论：0      收藏：0      [点我收藏+]

标签：

1、页面结构

<div class="container">
    <div class="row">
        <div class="span12">
            <div class="jc-demo-box">
                <input type="file"  id="fileChange" />
                <div class="prew" style="width:300px;height:300px;background:#000;position:relative;">
                    <img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>
                    <div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>
                </div>
              <form id="coords"class="coords"onsubmit="return false;"action="http://example.com/post.php">
                <div class="inline-labels">
                    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
                    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
                    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
                    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
                    <label>W <input type="text" size="4" id="w" name="w" /></label>
                    <label>H <input type="text" size="4" id="h" name="h" /></label>
                    <label>radio <input type="text" size="4" id="R" name="R" value="0"/></label>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>

js逻辑处理

var szyFile = {
    fileDom:null,//html 文件上传控件
    preview:null,//图片预览的区域
    imgMaxSize:2,//图片大小最大2M
    filterDom:[],//符合条件的元素
    filterImgDataUrl:[],//图片的dataUrl数据
    dragArea:null,//拖放区域
    jcrop_api:null,
    selectWidth:300,//选框宽度
    selectHeight:300,//选框高度
    Ratio:1,//上传图片比例
    imgRegExp:function(f){
        if(!/\.(jpg|jpeg|png)$/i.test(f.name)){
            alert(‘您上传的不是图片,请重新选择后上传！‘);
            return false;
        }
        return true;
    },
    clearCoords:function(){
         $(‘#coords input‘).val(‘‘);
    },
    showCoords:function(c){
        $(‘#x1‘).val(c.x);
        $(‘#y1‘).val(c.y);
        $(‘#x2‘).val(c.x2);
        $(‘#y2‘).val(c.y2);
        $(‘#w‘).val(c.w);
        $(‘#h‘).val(c.h);
    },
    jcropInit:function(obj){
        obj.Jcrop({
          onChange:   szyFile.showCoords,
          onSelect:   szyFile.showCoords,
          onRelease:  szyFile.clearCoords,
          aspectRatio: szyFile.Ratio
        },function(){
          szyFile.jcrop_api = this;
        });
        $(‘#coords‘).on(‘change‘,‘input‘,function(e){
          var x1 = $(‘#x1‘).val(),
              x2 = $(‘#x2‘).val(),
              y1 = $(‘#y1‘).val(),
              y2 = $(‘#y2‘).val();
          szyFile.jcrop_api.setSelect([x1,y1,x2,y2]);
        });
    },
    isSupport:function(){
        if(window.File && window.FileReader && window.FileList && window.Blob) {
            return true;
        } else {
           return false;
        }
    },
    select:function(e){
        var e = e || window.event;
        if(szyFile.isSupport()){
            $(‘#target‘).show();
            $(‘#filterPrew‘).hide();
            var files = e.target.files || e.dataTransfer.files;
            for(var i = 0, f; f = files[i]; i++){
                if(f){
                    if(szyFile.imgRegExp(f)){
                        if(f.size > szyFile.imgMaxSize*1024){
                            alert(‘图片过大,您上传的图片大于‘+szyFile.imgMaxSize+‘KB‘);
                            return false;
                        }else{
                            szyFile.filterDom.push(f);
                            var reader = new FileReader();
                            reader.onload = (function(){
                                return function(e){
                                    $(‘#target‘).attr(‘src‘,this.result);
                                    var resultImg = this.result;
                                    var img = new Image();
                                    img.onload = function(){
                                        var w = this.width;
                                        var h = this.height;
                                        if(w >= h){
                                            $(‘#target‘).css(‘width‘,szyFile.selectWidth+‘px‘);
                                            $(‘#target‘).css(‘height‘,h*(szyFile.selectWidth/w));
                                            var _top = ((szyFile.selectHeight-h*(szyFile.selectWidth/w))/2);
                                            $(‘#target‘).css(‘top‘,_top+‘px‘);
                                            $(‘#R‘).val(w/szyFile.selectWidth);
                                            if(szyFile.jcrop_api){
                                                szyFile.jcrop_api.destroy();
                                                szyFile.jcropInit($(‘#target‘));
                                            }else{
                                                szyFile.jcropInit($(‘#target‘));
                                            }
                                            $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘top‘:_top+‘px‘});
                                        }else{
                                            $(‘#target‘).css(‘height‘,szyFile.selectHeight+‘px‘);
                                            $(‘#target‘).css(‘width‘,w*(szyFile.selectHeight/h));
                                            var _left = (szyFile.selectWidth-w*(szyFile.selectHeight/h))/2;
                                            $(‘#target‘).css(‘left‘,_left+‘px‘);
                                            $(‘#R‘).val(h/szyFile.selectHeight);
                                            if(szyFile.jcrop_api){
                                                szyFile.jcrop_api.destroy();
                                                szyFile.jcropInit($(‘#target‘));
                                            }else{
                                                szyFile.jcropInit($(‘#target‘));
                                            }
                                            $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘left‘:_left+‘px‘});
                                        }
                                    }
                                    img.src = this.result;
                                };
                            })(f);
                            reader.readAsDataURL(f);
                        }
                    }
                }
            }
        }else{
            var targetS = e.srcElement;
            $(‘#target‘).hide();
            $(‘#filterPrew‘).show();
            var src = $(‘#fileChange‘).val();
            if(!/\.(jpg|jpeg|png)$/i.test(src)){
                alert(‘您上传的不是图片,请重新选择后上传！‘);
                return false;
            }
            var img = new Image();
            img.onload = function(){
                var w = this.width;
                var h = this.height;
                $(‘#filterPrew‘).css(‘filter‘, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale", src="‘+src+‘")‘);
                if(w >= h){
                    $(‘#filterPrew‘).css(‘width‘,szyFile.selectWidth+‘px‘);
                    $(‘#filterPrew‘).css(‘height‘,h*(szyFile.selectWidth/w));
                    var _top = ((szyFile.selectHeight-h*(szyFile.selectWidth/w))/2);
                    $(‘#filterPrew‘).css(‘top‘,_top+‘px‘);
                    $(‘#R‘).val(w/szyFile.selectWidth);
                    if(szyFile.jcrop_api){
                        szyFile.jcrop_api.destroy();
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }else{
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }
                    $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘top‘:_top+‘px‘});
                }else{
                    $(‘#filterPrew‘).css(‘height‘,szyFile.selectHeight+‘px‘);
                    $(‘#filterPrew‘).css(‘width‘,w*(szyFile.selectHeight/h));
                    var _left = (szyFile.selectWidth-w*(szyFile.selectHeight/h))/2;
                    $(‘#filterPrew‘).css(‘left‘,_left+‘px‘);
                    $(‘#R‘).val(h/szyFile.selectHeight);
                    if(szyFile.jcrop_api){
                        szyFile.jcrop_api.destroy();
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }else{
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }
                    $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘left‘:_left+‘px‘});
                }
            }
            img.src = src;
            
        }
    },
    fileOnchange:function(elm){
        if(elm.addEventListener){
             elm.addEventListener(‘change‘, this.select, false);
        }else{
             elm.onchange = function(){
                szyFile.select();
             }
        }
    },
    fileValue:function(){
        return this.fileDom.value;
    },
    init:function(dom,prev,maxL){
        if(dom) this.fileDom = dom;
        if(prev) this.preview = prev;
        if(maxL) this.imgMaxSize = maxL;
        this.fileOnchange(dom);
    }
}
$(function(){
      var dom = $(‘#fileChange‘)[0];
      var prev = $(‘.prevw‘)[0];
     szyFile.init(dom,prev,2000);
});

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="main.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />
<link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span12">
            <div class="jc-demo-box">
                <input type="file"  id="fileChange" />
                <div class="prew" style="width:300px;height:300px;background:#000;position:relative;">
                    <img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>
                    <div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>
                </div>
              <form id="coords"class="coords"onsubmit="return false;"action="http://example.com/post.php">
                <div class="inline-labels">
                    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
                    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
                    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
                    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
                    <label>W <input type="text" size="4" id="w" name="w" /></label>
                    <label>H <input type="text" size="4" id="h" name="h" /></label>
                    <label>radio <input type="text" size="4" id="R" name="R" value="0"/></label>
                </div>
              </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
var szyFile = {
    fileDom:null,//html 文件上传控件
    preview:null,//图片预览的区域
    imgMaxSize:2,//图片大小最大2M
    filterDom:[],//符合条件的元素
    filterImgDataUrl:[],//图片的dataUrl数据
    dragArea:null,//拖放区域
    jcrop_api:null,
    selectWidth:300,//选框宽度
    selectHeight:300,//选框高度
    Ratio:1,//上传图片比例
    imgRegExp:function(f){
        if(!/\.(jpg|jpeg|png)$/i.test(f.name)){
            alert(‘您上传的不是图片,请重新选择后上传！‘);
            return false;
        }
        return true;
    },
    clearCoords:function(){
         $(‘#coords input‘).val(‘‘);
    },
    showCoords:function(c){
        $(‘#x1‘).val(c.x);
        $(‘#y1‘).val(c.y);
        $(‘#x2‘).val(c.x2);
        $(‘#y2‘).val(c.y2);
        $(‘#w‘).val(c.w);
        $(‘#h‘).val(c.h);
    },
    jcropInit:function(obj){
        obj.Jcrop({
          onChange:   szyFile.showCoords,
          onSelect:   szyFile.showCoords,
          onRelease:  szyFile.clearCoords,
          aspectRatio: szyFile.Ratio
        },function(){
          szyFile.jcrop_api = this;
        });
        $(‘#coords‘).on(‘change‘,‘input‘,function(e){
          var x1 = $(‘#x1‘).val(),
              x2 = $(‘#x2‘).val(),
              y1 = $(‘#y1‘).val(),
              y2 = $(‘#y2‘).val();
          szyFile.jcrop_api.setSelect([x1,y1,x2,y2]);
        });
    },
    isSupport:function(){
        if(window.File && window.FileReader && window.FileList && window.Blob) {
            return true;
        } else {
           return false;
        }
    },
    select:function(e){
        var e = e || window.event;
        if(szyFile.isSupport()){
            $(‘#target‘).show();
            $(‘#filterPrew‘).hide();
            var files = e.target.files || e.dataTransfer.files;
            for(var i = 0, f; f = files[i]; i++){
                if(f){
                    if(szyFile.imgRegExp(f)){
                        if(f.size > szyFile.imgMaxSize*1024){
                            alert(‘图片过大,您上传的图片大于‘+szyFile.imgMaxSize+‘KB‘);
                            return false;
                        }else{
                            szyFile.filterDom.push(f);
                            var reader = new FileReader();
                            reader.onload = (function(){
                                return function(e){
                                    $(‘#target‘).attr(‘src‘,this.result);
                                    var resultImg = this.result;
                                    var img = new Image();
                                    img.onload = function(){
                                        var w = this.width;
                                        var h = this.height;
                                        if(w >= h){
                                            $(‘#target‘).css(‘width‘,szyFile.selectWidth+‘px‘);
                                            $(‘#target‘).css(‘height‘,h*(szyFile.selectWidth/w));
                                            var _top = ((szyFile.selectHeight-h*(szyFile.selectWidth/w))/2);
                                            $(‘#target‘).css(‘top‘,_top+‘px‘);
                                            $(‘#R‘).val(w/szyFile.selectWidth);
                                            if(szyFile.jcrop_api){
                                                szyFile.jcrop_api.destroy();
                                                szyFile.jcropInit($(‘#target‘));
                                            }else{
                                                szyFile.jcropInit($(‘#target‘));
                                            }
                                            $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘top‘:_top+‘px‘});
                                        }else{
                                            $(‘#target‘).css(‘height‘,szyFile.selectHeight+‘px‘);
                                            $(‘#target‘).css(‘width‘,w*(szyFile.selectHeight/h));
                                            var _left = (szyFile.selectWidth-w*(szyFile.selectHeight/h))/2;
                                            $(‘#target‘).css(‘left‘,_left+‘px‘);
                                            $(‘#R‘).val(h/szyFile.selectHeight);
                                            if(szyFile.jcrop_api){
                                                szyFile.jcrop_api.destroy();
                                                szyFile.jcropInit($(‘#target‘));
                                            }else{
                                                szyFile.jcropInit($(‘#target‘));
                                            }
                                            $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘left‘:_left+‘px‘});
                                        }
                                    }
                                    img.src = this.result;
                                };
                            })(f);
                            reader.readAsDataURL(f);
                        }
                    }
                }
            }
        }else{
            var targetS = e.srcElement;
            $(‘#target‘).hide();
            $(‘#filterPrew‘).show();
            var src = $(‘#fileChange‘).val();
            if(!/\.(jpg|jpeg|png)$/i.test(src)){
                alert(‘您上传的不是图片,请重新选择后上传！‘);
                return false;
            }
            var img = new Image();
            img.onload = function(){
                var w = this.width;
                var h = this.height;
                $(‘#filterPrew‘).css(‘filter‘, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale", src="‘+src+‘")‘);
                if(w >= h){
                    $(‘#filterPrew‘).css(‘width‘,szyFile.selectWidth+‘px‘);
                    $(‘#filterPrew‘).css(‘height‘,h*(szyFile.selectWidth/w));
                    var _top = ((szyFile.selectHeight-h*(szyFile.selectWidth/w))/2);
                    $(‘#filterPrew‘).css(‘top‘,_top+‘px‘);
                    $(‘#R‘).val(w/szyFile.selectWidth);
                    if(szyFile.jcrop_api){
                        szyFile.jcrop_api.destroy();
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }else{
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }
                    $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘top‘:_top+‘px‘});
                }else{
                    $(‘#filterPrew‘).css(‘height‘,szyFile.selectHeight+‘px‘);
                    $(‘#filterPrew‘).css(‘width‘,w*(szyFile.selectHeight/h));
                    var _left = (szyFile.selectWidth-w*(szyFile.selectHeight/h))/2;
                    $(‘#filterPrew‘).css(‘left‘,_left+‘px‘);
                    $(‘#R‘).val(h/szyFile.selectHeight);
                    if(szyFile.jcrop_api){
                        szyFile.jcrop_api.destroy();
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }else{
                        szyFile.jcropInit($(‘#filterPrew‘));
                    }
                    $(‘.jcrop-holder‘).css({‘position‘:‘absolute‘,‘left‘:_left+‘px‘});
                }
            }
            img.src = src;
            
        }
    },
    fileOnchange:function(elm){
        if(elm.addEventListener){
             elm.addEventListener(‘change‘, this.select, false);
        }else{
             elm.onchange = function(){
                szyFile.select();
             }
        }
    },
    fileValue:function(){
        return this.fileDom.value;
    },
    init:function(dom,prev,maxL){
        if(dom) this.fileDom = dom;
        if(prev) this.preview = prev;
        if(maxL) this.imgMaxSize = maxL;
        this.fileOnchange(dom);
    }
}
$(function(){
      var dom = $(‘#fileChange‘)[0];
      var prev = $(‘.prevw‘)[0];
     szyFile.init(dom,prev,2000);
});
</script>

 附件下载地址：兼容IE6+ 以上大部分浏览器，特殊浏览器没有测试！

下载

基于Jcrop的图片上传裁剪加预览

标签：

原文地址：http://www.cnblogs.com/shizhouyu/p/5458899.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！