基於Jcrop的圖片上傳裁剪加預覽

時間 2019-12-05

標籤基於 jcrop 圖片上傳裁剪預覽简体版

原文原文鏈接

最近本身沒事的時候研究了下圖片上傳，發現以前寫的是有bug的，這裏本身從新寫了一個！css

一、頁面結構html

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="jquery.Jcrop.min.css">
<body>
<form method="post" id="uploadimg" name="uploadimg" action="" enctype="multipart/form-data" target="apply_iframe">
    <input type="file"  id="fileChange" style="color:#000" name="imageFileGuide"/>
</form>
<div class="prew" style="width:300px;height:217px;background:#ccc;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>
    <img src="" id="filterPrewLoad" style="display:none;" />
</div>
<label>X1座標</label><input type="text" size="4" id="x1" name="x1" />
<label>Y1座標</label><input type="text" size="4" id="y1" name="y1" />
<label>X2座標</label><input type="text" size="4" id="x2" name="x2" />
<label>Y2座標</label><input type="text" size="4" id="y2" name="y2" />
<label>裁剪的寬</label><input type="text" size="4" id="w" name="w" />
<label>裁剪的高</label><input type="text" size="4" id="h" name="h" />
<label>縮放比例</label><input type="text" size="4" id="R" name="R" value="0"/>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery.Jcrop.min.js"></script>
<script src="upfile.js"></script>
<script>

var dom = $('#fileChange')[0];
var prev = $('.prevw')[0];
szyFile.init(dom,prev,{'Ratio':1.2,'selectWidth':400,'selectHeight':300});jquery

</script>

js邏輯處理web

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(ID){
        $(ID).Jcrop({
          onChange:   szyFile.showCoords,
          onSelect:   szyFile.showCoords,
          onRelease:  szyFile.clearCoords,
          aspectRatio: szyFile.Ratio,
          keySupport: false
        },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;
        }
    },
    setPrew:function(w,h,ID,modle){
        var _top = 0;
        var _left = 0;
        if(w >= h){
            var imgB = szyFile.selectWidth/w;
            var imgB1 = w/h;
            if(h*imgB <= szyFile.selectHeight){
                $(ID).css('width',szyFile.selectWidth+'px');
                $(ID).css('height',h*imgB+'px');
                _top = ((szyFile.selectHeight-h*imgB)/2);
                _left = 0;
                $(ID).css('top',_top+'px');
                $(ID).css('left',_left+'px');
                $('#R').val(w/szyFile.selectWidth);
            }else{
                $(ID).css('width',szyFile.selectHeight*imgB1+'px');
                $(ID).css('height',szyFile.selectHeight+'px');
                _top = 0;
                _left = ((szyFile.selectWidth-szyFile.selectHeight*imgB1)/2);
                $(ID).css('top',_top+'px');
                $(ID).css('left',_left+'px');
                $('#R').val(h/szyFile.selectHeight);
            }
            szyFile.jcropInit(ID);
            $('.jcrop-holder').css({'position':'absolute','top':_top+'px','left':_left+'px'});
            if(modle == 0){
                $('.jcrop-tracker').css({'filter':'alpha(opacity=30); BACKGROUND-COLOR: white'});
            }
        }else{
            var imgB = szyFile.selectHeight/h;
            var imgB1 = h/w;
            if(w*imgB <= szyFile.selectWidth){
                $(ID).css('width',w*imgB+'px');
                $(ID).css('height',szyFile.selectHeight+'px');
                _top = 0;
                _left = (szyFile.selectWidth - w*imgB)/2;
                $(ID).css('top',_top+'px');
                $(ID).css('left',_left+'px');
                $('#R').val(h/szyFile.selectHeight);
            }else{
                $(ID).css('width',szyFile.selectWidth+'px');
                $(ID).css('height',szyFile.selectWidth*imgB1+'px');
                _top = (szyFile.selectHeight - szyFile.selectWidth*imgB1)/2;
                _left = 0;
                $(ID).css('top',_top+'px');
                $(ID).css('left',_left+'px');
                $('#R').val(w/szyFile.selectHeight);
            }
            szyFile.jcropInit(ID);
            $('.jcrop-holder').css({'position':'absolute','top':_top+'px','left':_left+'px'});
            if(modle == 0){
                $('.jcrop-tracker').css({'filter':'alpha(opacity=30); BACKGROUND-COLOR: white'});
            }
        }
    },
    select:function(e){
        var e = e || window.event;
        if(szyFile.isSupport()){
            if(szyFile.jcrop_api){
                szyFile.jcrop_api.destroy();
                $('#target').remove();
                $('<img src="" id="target" width="100%" style="display:none;position:absolute;top:0;left:0;"/>').insertBefore('#filterPrew');
            }
            $('#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*1024){
                            alert('圖片過大,您上傳的圖片大於'+szyFile.imgMaxSize+'MB');
                            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;
                                        szyFile.setPrew(w,h,'#target',1);
                                    }
                                    img.src = this.result;
                                };
                            })(f);
                            reader.readAsDataURL(f);
                        }
                    }
                }
            }
        }else{
            if(szyFile.jcrop_api){
                szyFile.jcrop_api.destroy();
                $('<div id="filterPrew" style="display:none;position:absolute;top:0;left:0;"></div>').insertAfter('#target');
            }
            $('#target').hide();
            $('#filterPrew').show();
            var src = $('#fileChange')[0].value;
            try {
                 var image = new Image();
                 image.dynsrc = src;
                 var filesize = image.fileSize;
             } catch (err) {
                 $('#fileChange')[0].select();
                 src = document.selection.createRange().text;
             }
            if(!/\.(jpg|jpeg|png)$/i.test(src)){
                alert('您上傳的不是圖片,請從新選擇後上傳！');
                return false;
            }
            $('#filterPrew').css('filter','none');
            $('#filterPrewLoad').css('filter','none');
            $('#filterPrew').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale", src="'+src+'")');
            $('#filterPrewLoad').css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "image", src="'+src+'")');
            var w = $('#filterPrewLoad').width();
            var h = $('#filterPrewLoad').height();
            szyFile.setPrew(w,h,'#filterPrew',0);
        }
    },
    fileOnchange:function(elm){
        if(elm.addEventListener){
             elm.addEventListener('change', this.select, false);
        }else{
             elm.onchange = function(){
                szyFile.select();
             }
        }
    },
    fileValue:function(){
        return this.fileDom.value;
    },
    setRadio:function(num){
        if(num && num > 0){
            szyFile.Ratio = num;
        }
    },
    setSelectWidth:function(num){
        if(num && num > 0){
            szyFile.selectWidth = num;
        }
    },
    setSelectHeight:function(num){
        if(num && num > 0){
            szyFile.selectHeight = num;
        }
    },
    setImgMaxSize:function(num){
        if(num && num > 0){
            szyFile.imgMaxSize = num;
        }
    },
    init:function(dom,prev,config){
        if(config.imgMaxSize && config.imgMaxSize > 0){
            szyFile.imgMaxSize = config.imgMaxSize;
        }
        if(config.selectWidth && config.selectWidth > 0){
            szyFile.selectWidth = config.selectWidth;
        }
        if(config.selectHeight && config.selectHeight > 0){
            szyFile.selectHeight = config.selectHeight;
        }
        if(config.Ratio && config.Ratio > 0){
            szyFile.Ratio = config.Ratio;
        }
        if(dom) this.fileDom = dom;
        if(prev) this.preview = prev;
        this.fileOnchange(dom);
    }
}