zoukankan      html  css  js  c++  java
  • 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("系统错误!");
                }
            });
        });
  • 相关阅读:
    HDU 3697贪心
    HDU 3226 背包
    numpy_2nd 新建矩阵的五种方法 array zeros empty arange().reshape()
    numpy_1st 属性 ndim,shape,size
    CV学习笔记第二课(上)
    33. 搜索旋转排序数组 二分法
    35. 搜索插入位置 今天就是二分法专场
    34.在排序数组中查找元素的第一个和最后一个位置 二分法
    CV第三课
    CV第二课(下)
  • 原文地址:https://www.cnblogs.com/finnlee/p/4903815.html
Copyright © 2011-2022 走看看