PHP+JQUERY+AJAX上传、裁剪图片(2)

<script type="text/javascript">
    var imgCut = {
        imgOpt : {
            imgPrototypeId : 'imgPrototype',
            imgViewId: 'imgView',
            cutBox: 'cut',
            viewLeft:0,
            viewTop:0,
            viewW:340,   //裁剪宽
            viewH:340,   //裁剪高
            protoW:440,  //原宽  显示原图
            protoH:440,  //原高  显示原图
            Callback : null
        },
        init : function(opts){
            $.extend(imgCut.imgOpt, opts);
            if(!document.getElementById(imgCut.imgOpt.imgPrototypeId) || !document.getElementById(imgCut.imgOpt.imgViewId) || !document.getElementById(imgCut.imgOpt.cutBox)){
                alert('配置错误');
                return false;
            }
            var imgA = document.getElementById(imgCut.imgOpt.imgPrototypeId);
            var imgB = document.getElementById(imgCut.imgOpt.imgViewId);
            var cut  = document.getElementById(imgCut.imgOpt.cutBox);
            var    imgNew = new Image();
            imgNew.src = imgA.src;
            imgNew.onload = function() {
                var _this = this;
                var imgW = _this.width;
                var imgH = _this.height;

                imgCut.imgOpt.viewLeft = (imgCut.imgOpt.protoW-imgCut.imgOpt.viewW)/2;
                imgCut.imgOpt.viewTop  = (imgCut.imgOpt.protoH-imgCut.imgOpt.viewH)/2;
                imgB.src = imgA.src;
                imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px';
                imgB.style.top  = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px';
                cut.style.left  = imgCut.imgOpt.viewLeft+'px';
                cut.style.top   = imgCut.imgOpt.viewTop+'px';
                cut.style.display = 'block';
                imgCut.move();
                return imgCut.imgOpt;
            }
            imgNew.onerror = function(){
                alert('图片加载失败');
            }
            return imgCut.imgOpt;
        },
        move:function(){
            var imgB = document.getElementById(imgCut.imgOpt.imgViewId);
            var imgW = imgB.width;
            var imgH = imgB.height;
            var obj = document.getElementById(imgCut.imgOpt.cutBox);
            var isMove = false;
            var startPosition = movePosition = {x:0,y:0};
            var cutPosition = {l:0,t:0};
            obj.onmousedown = function(e){
                isMove = true;
                cutPosition = {l:this.style.left.replace('px',''),t:this.style.top.replace('px','')};
                e = e ? e : window.event;
                startPosition = {
                    x: e.pageX,
                    y: e.pageY
                }
            }
            obj.onmouseup = obj.onmouseout = function(){ isMove = false; }
            obj.onmousemove = function(e){
                if(!isMove){ return}
                e = e ? e : window.event;
                movePosition = {
                    x: e.pageX,
                    y: e.pageY
                }
                var deltaX = Number(movePosition.x) - Number(startPosition.x) + Number(cutPosition.l);
                var deltaY = Number(movePosition.y) - Number(startPosition.y) + Number(cutPosition.t);
                0 > deltaX && (deltaX = 0);
                0 > deltaY && (deltaY = 0);
                (imgCut.imgOpt.protoW-imgCut.imgOpt.viewW) < deltaX && (deltaX = imgCut.imgOpt.protoW-imgCut.imgOpt.viewW);
                (imgCut.imgOpt.protoH-imgCut.imgOpt.viewH) < deltaY && (deltaY = imgCut.imgOpt.protoH-imgCut.imgOpt.viewH);
                imgCut.imgOpt.viewLeft = deltaX;
                imgCut.imgOpt.viewTop  = deltaY;
                this.style.left = deltaX + 'px';
                this.style.top  = deltaY + 'px';

                imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px';
                imgB.style.top  = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px';
            }
        }

    };
    var t = null;
    function uploadCutImg(replaceUrl,fileElementId,past){
        $.ajaxFileUpload
        (
                {
                    url:'/index.php?s=/Pc/Centerall/upload1.html', //用于文件上传的服务器端请求地址
                    secureuri: false, //一般设置为false
                    fileElementId: fileElementId, //文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'HTML', //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        data = $.parseJSON(data);
                        $path = './Uploads/'+data.savepath+data.savename;
                        $("#"+replaceUrl).attr('src',$path);
                        $pastPath = $("#"+past).val();
                        if($pastPath != ""){
                            //删掉之前的照片
                            delImage($pastPath);
                        }
                        $("#"+past).val($path);
                        $("#doImgCut").css("display","inline-block");
                        t = imgCut.init();
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
        )
    }

    function delImage(path){
        $.post("/index.php?s=/Pc/Base/delImage.html",{
            path : path
        }, function(data, textStatus) {});

    }

    $('#doImgCut').on('click',function(){
        var ileft=t.viewLeft;
        var itop=t.viewTop;
        var iw=t.viewW;
        var ih=t.viewH;
        var jqimg=$("#imgPrototype").attr('src');


        $.ajax({
            url: "{:U('Centerall/uploadImgCut')}",
            type: 'post',
            cache: false,
            async: true, /*true异步执行,false*/
            data: {'ileft':ileft,'itop':itop,'iw':iw,'ih':ih,'jqimg':jqimg},
            dataType: 'json',
            beforeSend:function(){  tusi("正在截图中...");},
            success:function(data) {

                if(data.state){
                    $("#vipuid").attr('src',data.url);
                }
                $("#doImgCut").css("display","none");
                tusi(data.msg);
            },
            error : function() {
                tusi("系统错误!");
            }
        });
    });

 

posted @ 2015-10-23 11:01  FinnYY  阅读(302)  评论(0编辑  收藏  举报