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

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+ 以上大部分浏览器，特殊浏览器没有测试！

下载

时间： 2024-10-07 01:36:51

基于Jcrop的图片上传裁剪加预览的相关文章

web 图片上传实现本地预览

前言: 刚成为码农不久,第一次工作中接触图片上传功能,说到图片上传,大多数程序员可能都是先上传服务器,再获取路径.如果用户多长更改图片,服务器会产生许多垃圾文件.怎样用js实现本地预览.今天特意抽空百度研究了一下. 在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传按钮添加事件.隐藏真正input框.用事件来触发: function imgBtn(

Asp.net中FileUpload控件实现图片上传并带预览显示

单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的单击事件中加载已上传图片. 2.关键代码:     页面代码: 1 <asp:FileUpload ID="FileUpload" runat="server" /> 2 <asp:Button ID="BtnUp" runat="

调用相机，选择图片上传，带预览功能、图片压缩、相机文字设置、

摘要 iOS调用相机,iOS调用相册,保存至应用程序沙盒,高保真压缩图片,并有点击放大预览,再次点击缩回至原大小,带动画效果,附源码下载地址. Xcode版本4.5.1 类库ios6.0 IOS调用相机 图片预览 图片上传 压缩图片 模拟器添加图片 目录[-] 判断是否支持相机,跳转到相机或相册界面 七.保存图片 高保真压缩图片方法 八.实现点击图片预览功能,滑动放大缩小,带动画 ps:模拟器添加图片 源码下载地址: 一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate ? 1

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览 具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息. 先介绍几个技术点,没接触过的朋友,可以先看看: Promise对象:是异步编程的一种解决方案,里面保存着某个未来才会结束的事件的结果.Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理.技术连接:http://es6.ruany

图片上传前的预览（PHP）

1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post" action="upload.php"><input type="file" name="file1" id="file1" /></form>2.试下效果: 判断文件类型:当用户选择了一

jquery实现图片上传前本地预览

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery1.8.3-min.js"></script></head><body><div style="width:500p

图片上传后及时预览

<!DOCTYPE html> <html> <head> <meta content="charset=utf-8" /> <!--设置图片上传后预览的div样式--> <style type="text/css"> *{ float:left; margin:0; } body>div{ width:200px; height:225px; text-align:center; } #

图片上传后即时预览

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> //设置图片上传后预览的div样式 <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #

type=file 图片上传时的预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <input type=file name="doc"