软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> js头像上传(图片截取)插件全屏高清版源码 -> 正文阅读

[Web前端]js头像上传(图片截取)插件全屏高清版源码


CSDN 上传图片出了问题  
index.html
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ccp</title>
    <link href="Content/ccp.css" rel="stylesheet" />
    <script src="Scripts/cxc.js"></script>
    <script src="Scripts/ccp.js"></script>
    <script src="Scripts/fun.js"></script>
</head>
<body>
    <div id="SelectPicture">选 择 图 片</div>

    <div id="pre">
        <div id="prea">
            <div id="ctna">
                <img id="imga"/>
            </div>
        </div>
        <div id="preb">
            <div id="ctnb">
                <img id="imgb"/>
            </div>
        </div>
        <div id="prec">
            <div id="ctnc">
                <img id="imgc"/>
            </div>
        </div>
    </div>

    <div id="ccp">
        <div id="ctn">
            <img id="fixed_img" />
            <div id="varied_div">
                <img id="varied_div_img" />
                <i id="TopLeft"></i>
                <i id="TopRight"></i>
                <i id="BottomRight"></i>
                <i id="BottomLeft"></i>
            </div>
        </div>
        <div id="black_cover"></div>
    </div>

    <div id="bt">
        <div id="Y_OUT">
            <div id="Y">Y</div>
        </div>
        <div id="N_OUT">
            <div id="N">N</div>
        </div>
    </div>
</body>
</html>

cxc.js
/* cxc.js 频繁操作公共接口 */
var $ = function (id) {
    return document.getElementById(id);
};    //通过id获取dom对象
var A = function (msg) {
    alert(msg);
};   //alert的简写
var EmptyFun = function () {
};   // 空方法
var setL = function (dom, L) {
    dom.style.left = L + "px";
};   // 设置 dom 的 left
var setT = function (dom, T) {
    dom.style.top = T + "px";
};   // 设置 dom 的 top
var setLT = function (dom, L, T) {
    dom.style.left = L + "px";
    dom.style.top = T + "px";
};    //同时设置 dom 的 left top
var getLT = function (dom) {
    return [parseInt(dom.style.left), parseInt(dom.style.top)];
};    //   返回dom的left和top值,类型为整型数组[int,int]
var setW = function (W) {
    dom.style.width = W + "px";
};     // 设置 dom 的 width
var setH = function (H) {
    dom.style.height = H + "px";
};     // 设置 dom 的 height
var setWH = function (dom, W, H) {
    dom.style.width = W + "px";
    dom.style.height = H + "px";
};     //同时设置 dom 的 width height
var getWH = function (dom) {
    return [parseInt(dom.style.width), parseInt(dom.style.height)];
};  //    返回dom的 width 和 height 值,类型为整型数组[int,int]
var setLTWH = function (dom, L, T, W, H) {
    dom.style.left = L + "px";
    dom.style.top = T + "px";
    dom.style.width = W + "px";
    dom.style.height = H + "px";
};   //同时设置 dom 的 left top width height
var setRTWH = function (dom, R, T, W, H) {
    dom.style.right = R + "px";
    dom.style.top = T + "px";
    dom.style.width = W + "px";
    dom.style.height = H + "px";
};   //同时设置 dom 的 left top width height
var getLTWH = function (dom) {
    return [parseInt(dom.style.left), parseInt(dom.style.top), parseInt(dom.style.width), parseInt(dom.style.height)]
};      //  返回dom的 left top width  height 值,类型为整型数组[int,int,int,int]
var setcursor = function (dom,shape) {
    dom.style.cursor = shape;
};  //设置鼠标经过dom的指针形状
var EventsType = {//事件类型
    click:"click",
    mousedown:"mousedown",
    mouseup:"mouseup",
    mouseover:"mouseover",
    mouseleave:"mouseleave",
    mousemove:"mousemove",
    DOMContentLoaded:"DOMContentLoaded",
};
var AddEvent = function (dom, type, fun) {
    dom.addEventListener(type, fun, false);
};      //添加dom对象的事件监听方法
var AddEvent2 = function (dom, type1, fun1, type2, fun2) {
    dom.addEventListener(type1, fun1, false);
    dom.addEventListener(type2, fun2, false);
};     //一次添加dom的两个事件监听方法
var AddEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {
    dom.addEventListener(type1, fun1, false);
    dom.addEventListener(type2, fun2, false);
    dom.addEventListener(type3, fun3, false);
}; //一次添加dom的三个事件监听方法
var DelEvent = function (dom, type, fun) {
    dom.removeEventListener(type, fun, false);
};  // 删除dom对象的事件监听方法
var DelEvent2 = function (dom, type1, fun1, type2, fun2) {
    dom.removeEventListener(type1, fun1, false);
    dom.removeEventListener(type2, fun2, false);
}; //一次删除dom对象的两个事件监听方法
var DelEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) {
    dom.removeEventListener(type1, fun1, false);
    dom.removeEventListener(type2, fun2, false);
    dom.removeEventListener(type3, fun3, false);
}; //一次删除dom对象的三个事件监听方法
var inArray = function (str, arr) {
    for (var i = 0; i < arr.length; i++) {
        if (str == arr[i]) {
            return true;
        }
    }
    return false;
}; //  判断字符串str是否存在于数组arr
var cannotselect = function () {
    window.getSelection().removeAllRanges();
};    //页面元素(文字、图片等)不能被选中
var setStyle = function (dom, styleName, styleValue) {
    dom.setAttribute("style", styleName + ":" + styleValue + ";");
};  //设置dom的 一个style 属性值
var setStyle2 = function (dom, styleName1, styleValue1, styleName2, styleValue2) {
    dom.setAttribute("style", styleName1 + ":" + styleValue1 + ";" + styleName2 + ":" + styleValue2 + ";");
};//一次设置dom的 两个style 属性值
var delStyle = function (dom, styleName) {
    dom.removeAttribute("style", styleName);
};//删除dom的 一个style 属性值
var delStyle2 = function (dom, styleName1, styleName2) {
    dom.removeAttribute("style", styleName1);
    dom.removeAttribute("style", styleName2);
};//一次删除dom的 两个style 属性值
var setAttr = function (dom, attrName, attrValue) {
    dom.setAttribute(attrName, attrValue);
};// 设置dom的 一个属性值
var setAttr2 = function (dom, attrName1, attrValue1, attrName2, attrValue2) {
    dom.setAttribute(attrName1, attrValue1);
    dom.setAttribute(attrName2, attrValue2);
};//一次设置dom的 两个属性值
var delAttr = function (dom, attrName) {
    dom.removeAttribute(attrName);
};//删除dom的 一个属性值
var delAttr2 = function (dom, attrName1, attrName2) {
    dom.removeAttribute(attrName1);
    dom.removeAttribute(attrName2);
};//删除dom 的两个属性值
var Hide = function (dom) {
    dom.style.display = "none";
};//   隐藏dom
var Hide3 = function (dom1,dom2,dom3) {
    dom1.style.display = "none";
    dom2.style.display = "none";
    dom3.style.display = "none";
};//   隐藏3个dom
var Show = function (dom) {
    dom.style.display = "inline";
};  //  显示dom
var Show3 = function (dom1, dom2, dom3) {
    dom1.style.display = "inline";
    dom2.style.display = "inline";
    dom3.style.display = "inline";
};//   显示3个dom
/* cxc.js 频繁操作公共接口 */

/* AJAX 接口 */
var url, method, msg;
var xmlReq = new XMLHttpRequest();
var AJAX = function (url, method, msg, callback) {
    xmlReq.open(method, url, true);
    xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xmlReq.onreadystatechange = function () {
        if (xmlReq.readyState == 4) {
            if (xmlReq.status == 200) {
                callback();
            }
            else {
                A("ajax status is " + xmlReq.status);
            }
        }
    };
    xmlReq.send(msg);
};
/* AJAX 接口 */

/* 入口 */
var start = function (fun) {
    var begin = function () {
        DelEvent(document, EventsType.DOMContentLoaded, begin);
        fun();
    };
    AddEvent(document, EventsType.DOMContentLoaded, begin);
};
/* 入口 */

/* 环境 */
var screenW = window.innerWidth;
var screenH = window.innerHeight;
/* 环境 */

ccp.js
var cfg = {
    imgtype: ["image/jpeg", "image/png", "image/gif", "image/bmp"],
    imgsize: 5 * 1024 * 1024,
    varied_divMIN: 50,
    varied_divDEFAULT: 100,
    needWH:0,
};
var dom = {
    body: null,
    SelectPicture: null,
    upfile: null,
    pre: null,
    ccp: null,
    bt: null,
    prea: null,
    preb: null,
    prec: null,
    ctna: null,
    ctnb: null,
    ctnc: null,
    imga: null,
    imgb: null,
    imgc: null,
    Y_OUT: null,
    N_OUT: null,
    Y: null,
    N: null,
    ctn: null,
    black_cover: null,
    fixed_img: null,
    varied_div: null,
    varied_div_img: null,
    TopLeft: null,
    TopRight: null,
    BottomRight: null,
    BottomLeft: null,
};
var ccp = {
    SelectPictureW: null,
    SelectPictureH: null,
    SelectPictureP1: 9,
    SelectPictureP2: 4,
    SelectPictureL: null,
    SelectPictureT: null,
    SelectPictureFontSize: null,
    ///////////////////////////
    file: null,
    imgtype: null,
    imgsize: null,
    ///////////////////////////
    imgW: null,
    imgH: null,
    imgN: null,
    imgURL: null,
    //////////////////////////
    preW: null,
    preH: null,
    ccpW: null,
    ccpH: null,
    btW: null,
    btH: null,
    /////////////////////////
    pre4: null,
    preaL: null,
    preaT: null,
    preaWH: null,
    prebL: null,
    prebT: null,
    prebWH: null,
    precL: null,
    precT: null,
    precWH: null,
    ctnLT: 3,
    ctnaWH: null,
    ctnbWH: null,
    ctncWH: null,
    //////////////////////////
    YN3: null,
    YN_OUTWH: null,
    YNWH: null,
    YN_OUTR: null,
    Y_OUTT: null,
    N_OUTT: null,
    YNLT1: 25,
    YNLT2: 20,
    //////////////////////////
    ctnL: null,
    ctnT: null,
    black_coverL: null,
    black_coverT: null,
    /////////////////////////
    varied_divL: null,
    varied_divT: null,
    varied_divWH: null,
    varied_divMaxL: null,
    varied_divMaxT: null,
    varied_div_imgWH: null,
    varied_div_imgL: null,
    varied_div_imgT: null,
    /////////////////////////
    imgaW: null,
    imgaH: null,
    imgaL: null,
    imgaT: null,
    imgbW: null,
    imgbH: null,
    imgbL: null,
    imgbT: null,
    imgcW: null,
    imgcH: null,
    imgcL: null,
    imgcT: null,
    /////////////////////////
};
var GET_DOM = function () {
    dom.body = document.body;
    dom.pre = $("pre");
    dom.ccp = $("ccp");
    dom.bt = $("bt");
    dom.SelectPicture = $("SelectPicture");
    dom.prea = $("prea");
    dom.preb = $("preb");
    dom.prec = $("prec");
    dom.ctna = $("ctna");
    dom.ctnb = $("ctnb");
    dom.ctnc = $("ctnc");
    dom.imga = $("imga");
    dom.imgb = $("imgb");
    dom.imgc = $("imgc");
    dom.Y_OUT = $("Y_OUT");
    dom.N_OUT = $("N_OUT");
    dom.Y = $("Y");
    dom.N = $("N");
    dom.ctn = $("ctn");
    dom.black_cover = $("black_cover");
    dom.fixed_img = $("fixed_img");
    dom.varied_div = $("varied_div");
    dom.varied_div_img = $("varied_div_img");   
    dom.TopLeft = $("TopLeft");
    dom.TopRight = $("TopRight");
    dom.BottomRight = $("BottomRight");
    dom.BottomLeft = $("BottomLeft");
};
var INIT_DOM = function () {
    setStyle2(dom.body, "width", screenW + "px", "height", screenH + "px");
    dom.body.style.backgroundImage = get_random_bgimg(7);/////////////////////
    set_SelectPictureW(Math.floor(screenW / ccp.SelectPictureP1));
    AddEvent2(dom.SelectPicture, EventsType.mouseover, SelectPicture_mouseover, EventsType.mouseleave, SelectPicture_mouseleave);
    AddEvent(dom.SelectPicture, EventsType.click, SelectPicture_click);/////////////////////
    ccp.preH = ccp.ccpH = ccp.btH = screenH - 2;
    ccp.ccpW = screenH + 100 - 2;
    ccp.preW = Math.ceil((screenW - (ccp.ccpW + 2)) / 2) - 2;
    ccp.btW = screenW - (ccp.ccpW + 2) - (ccp.preW + 2) - 2;
    setStyle2(dom.pre, "width", ccp.preW + "px", "height", ccp.preH + "px");
    setStyle2(dom.ccp, "width", ccp.ccpW + "px", "height", ccp.ccpH + "px");
    setStyle2(dom.bt, "width", ccp.btW + "px", "height", ccp.btH + "px");
    Hide3(dom.pre, dom.ccp, dom.bt);/////////////////////
};
var EVENTS = function () {
    AddEvent(dom.varied_div, EventsType.mousedown, varied_div_mousedown);//varied_div
    AddEvent(dom.TopLeft, EventsType.mousedown, TopLeft_mousedown);//TopLeft
    AddEvent(dom.TopRight, EventsType.mousedown, TopRight_mousedown);//TopRight
    AddEvent(dom.BottomRight, EventsType.mousedown, BottomRight_mousedown);//BottomRight
    AddEvent(dom.BottomLeft, EventsType.mousedown, BottomLeft_mousedown);//BottomLeft
    AddEvent(dom.Y, EventsType.click, Y_click);//Y
    AddEvent(dom.N, EventsType.click, N_click);//N
};
var END = function () {
    AddEvent(document, EventsType.mousemove, cannotselect);
};
start(function () {
    GET_DOM();
    INIT_DOM();
    EVENTS();
    END();
});

fun.js
var get_random_bgimg = function (n) {
    var m = Math.floor(Math.random() * n);
    var r = "url(Images/bg" + 6 + ".png)";
    return r;
};
var set_SelectPictureW = function (W) {
    ccp.SelectPictureW = W;
    ccp.SelectPictureH = Math.floor(ccp.SelectPictureW / ccp.SelectPictureP2);
    ccp.SelectPictureL = Math.floor((screenW - ccp.SelectPictureW) / 2);
    ccp.SelectPictureT = Math.floor((screenH - ccp.SelectPictureH) / 2);
    ccp.SelectPictureFontSize = Math.floor(ccp.SelectPictureH / 1.5);
    setStyle(dom.SelectPicture, "font-size", ccp.SelectPictureFontSize + "px");
    setLTWH(dom.SelectPicture, ccp.SelectPictureL, ccp.SelectPictureT, ccp.SelectPictureW, ccp.SelectPictureH);
};
var SelectPicture_mouseover = function () {
    set_SelectPictureW(ccp.SelectPictureW + 15);
};
var SelectPicture_mouseleave = function () {
    set_SelectPictureW(ccp.SelectPictureW - 15);
};
///////////////////////////////////////////////////
var downX, downY, oldL, oldT, tempWH, tempL, tempT, dxMax, tempMaxL, tempMaxT;
var varied_divLimit = function () {
    if (ccp.varied_divL < 0)
        ccp.varied_divL = 0;
    else if (ccp.varied_divL > ccp.varied_divMaxL)
        ccp.varied_divL = ccp.varied_divMaxL;
    if ((ccp.varied_divT < 0))
        ccp.varied_divT = 0;
    else if (ccp.varied_divT > ccp.varied_divMaxT)
        ccp.varied_divT = ccp.varied_divMaxT;
};
var varied_div_mousedown = function (e) {
    if (e.button > 0) {
        varied_div_mouseup();
        return false;
    }
    e.preventDefault && e.preventDefault();
    downX = e.clientX;
    downY = e.clientY;
    oldL = ccp.varied_divL;
    oldT = ccp.varied_divT;
    AddEvent2(document, EventsType.mouseup, varied_div_mouseup, EventsType.mousemove, doc_varied_div_mousemove);
};
var doc_varied_div_mousemove = function (e) {
    ccp.varied_divL = oldL + e.clientX - downX;
    ccp.varied_divT = oldT + e.clientY - downY;
    varied_divLimit();
    setLT(dom.varied_div, ccp.varied_divL, ccp.varied_divT);
    setvaried_div_img();
    setpreimg();
};
var varied_div_mouseup = function () {
    DelEvent2(document, EventsType.mouseup, varied_div_mouseup, EventsType.mousemove, doc_varied_div_mousemove);
};
////////////////////////////////////////////////////
var TopLeft_mousedown = function (e) {
    if (e.button > 0) {
        TopLeft_mouseup();
        return false;
    }
    e.preventDefault && e.preventDefault();
    downX = e.clientX;
    downY = e.clientY;
    oldL = ccp.varied_divL;
    oldT = ccp.varied_divT;
    tempWH = ccp.varied_divWH;
    tempL = ccp.varied_divL;
    tempT = ccp.varied_divT;
    tempMaxL = ccp.varied_divMaxL;
    tempMaxT = ccp.varied_divMaxT;
    dxMax = tempL >= tempT ? tempT : tempL;
    AddEvent2(document, EventsType.mouseup, TopLeft_mouseup, EventsType.mousemove, doc_TopLeft_mousemove);
};
var doc_TopLeft_mousemove = function (e) {
    varied_div_mouseup();//移动事件屏蔽,非常重要
    var dx = e.clientY - downY;
    if (dx < 0 && Math.abs(dx) > dxMax) {
        dx = -dxMax;
    }
    else if (dx > 0 && dx > tempWH - cfg.varied_divMIN) {
        dx = tempWH - cfg.varied_divMIN;
    }
    ccp.varied_divMaxL = tempMaxL + dx;
    ccp.varied_divMaxT = tempMaxT + dx;
    ccp.varied_divL = oldL + dx;
    ccp.varied_divT = oldT + dx;
    ccp.varied_divWH = tempWH - dx;
    setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
    setvaried_div_img();
    setpreimg();
};
var TopLeft_mouseup = function () {
    DelEvent2(document, EventsType.mouseup, TopLeft_mouseup, EventsType.mousemove, doc_TopLeft_mousemove);
};
////////////////////////////////////////////////////
var TopRight_mousedown = function (e) {
    if (e.button > 0) {
        TopRight_mouseup();
        return false;
    }
    e.preventDefault && e.preventDefault();
    downX = e.clientX;
    downY = e.clientY;
    oldL = ccp.varied_divL;
    oldT = ccp.varied_divT;
    tempWH = ccp.varied_divWH;
    tempL = ccp.imgW - ccp.varied_divL - ccp.varied_divWH;
    tempT = ccp.varied_divT;
    tempMaxL = ccp.varied_divMaxL;
    tempMaxT = ccp.varied_divMaxT;
    dxMax = tempL >= tempT ? tempT : tempL;
    AddEvent2(document, EventsType.mouseup, TopRight_mouseup, EventsType.mousemove, doc_TopRight_mousemove);
};
var doc_TopRight_mousemove = function (e) {
    varied_div_mouseup();//移动事件屏蔽,非常重要
    var dx = e.clientY - downY;
    if (dx < 0 && Math.abs(dx) > dxMax) {
        dx = -dxMax;
    }
    else if (dx > 0 && dx > tempWH - cfg.varied_divMIN) {
        dx = tempWH - cfg.varied_divMIN;
    }
    ccp.varied_divMaxL = tempMaxL + dx;
    ccp.varied_divMaxT = tempMaxT + dx;
    ccp.varied_divL = oldL;
    ccp.varied_divT = oldT + dx;
    ccp.varied_divWH = tempWH - dx;
    setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
    setvaried_div_img();
    setpreimg();
};
var TopRight_mouseup = function () {
    DelEvent2(document, EventsType.mouseup, TopRight_mouseup, EventsType.mousemove, doc_TopRight_mousemove);
};
///////////////////////////////////////////////////
var BottomRight_mousedown = function (e) {
    if (e.button > 0) {
        BottomRight_mouseup();
        return false;
    }
    e.preventDefault && e.preventDefault();
    downX = e.clientX;
    downY = e.clientY;
    oldL = ccp.varied_divL;
    oldT = ccp.varied_divT;
    tempWH = ccp.varied_divWH;
    tempL = ccp.imgW - ccp.varied_divL - ccp.varied_divWH;
    tempT = ccp.imgH - ccp.varied_divT - ccp.varied_divWH;
    tempMaxL = ccp.varied_divMaxL;
    tempMaxT = ccp.varied_divMaxT;
    dxMax = tempL >= tempT ? tempT : tempL;
    AddEvent2(document, EventsType.mouseup, BottomRight_mouseup, EventsType.mousemove, doc_BottomRight_mousemove);
};
var doc_BottomRight_mousemove = function (e) {
    varied_div_mouseup();//移动事件屏蔽,非常重要
    var dx = e.clientY - downY;
    if (dx > 0 && dx > dxMax) {
        dx = dxMax;
    }
    else if (dx < 0 && Math.abs(dx) > tempWH - cfg.varied_divMIN) {
        dx = -(tempWH - cfg.varied_divMIN);
    }
    ccp.varied_divMaxL = tempMaxL - dx;
    ccp.varied_divMaxT = tempMaxT - dx;
    ccp.varied_divL = oldL;
    ccp.varied_divT = oldT;
    ccp.varied_divWH = tempWH + dx;
    setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
    setvaried_div_img();
    setpreimg();
};
var BottomRight_mouseup = function () {
    DelEvent2(document, EventsType.mouseup, BottomRight_mouseup, EventsType.mousemove, doc_BottomRight_mousemove);
};
///////////////////////////////////////////////////
var BottomLeft_mousedown = function (e) {
    if (e.button > 0) {
        BottomLeft_mouseup();
        return false;
    }
    e.preventDefault && e.preventDefault();
    downX = e.clientX;
    downY = e.clientY;
    oldL = ccp.varied_divL;
    oldT = ccp.varied_divT;
    tempWH = ccp.varied_divWH;
    tempL = ccp.varied_divL;
    tempT = ccp.imgH - ccp.varied_divT - ccp.varied_divWH;
    tempMaxL = ccp.varied_divMaxL;
    tempMaxT = ccp.varied_divMaxT;
    dxMax = tempL >= tempT ? tempT : tempL;
    AddEvent2(document, EventsType.mouseup, BottomLeft_mouseup, EventsType.mousemove, doc_BottomLeft_mousemove);
};
var doc_BottomLeft_mousemove = function (e) {
    varied_div_mouseup();//移动事件屏蔽,非常重要
    var dx = e.clientY - downY;
    if (dx > 0 && dx > dxMax) {
        dx = dxMax;
    }
    else if (dx < 0 && Math.abs(dx) > tempWH - cfg.varied_divMIN) {
        dx = -(tempWH - cfg.varied_divMIN);
    }
    ccp.varied_divMaxL = tempMaxL - dx;
    ccp.varied_divMaxT = tempMaxT - dx;
    ccp.varied_divL = oldL - dx;
    ccp.varied_divT = oldT;
    ccp.varied_divWH = tempWH + dx;
    setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
    setvaried_div_img();
    setpreimg();
};
var BottomLeft_mouseup = function () {
    DelEvent2(document, EventsType.mouseup, BottomLeft_mouseup, EventsType.mousemove, doc_BottomLeft_mousemove);
};
///////////////////////////////////////////////////
var getDATA = function () {
    var parameter = location.search; //获取url中"?"符后的字串
    if (parameter.length == 0) {
        return 666;
    } else {
        var ss = parameter.split("&");
        url = ss[0].split("=")[1];
        cfg.needWH = ss[1].split("=")[1];
    }
    if (url.length == 0) {
        return 777;
    } else if (cfg.needWH == 0) {
        return 888;
    } else if (cfg.needWH > 1000) {
        return 999;
    }
    
    var canvas = document.createElement("canvas");
    canvas.style.display = "none";
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FFFFFF";
    canvas.width = canvas.height = cfg.needWH;
    ctx.fillRect(0, 0, cfg.needWH, cfg.needWH);
    var a = Math.ceil(ccp.varied_divL * ccp.imgN);
    var b = Math.ceil(ccp.varied_divT * ccp.imgN);
    var c = Math.ceil(ccp.varied_divWH * ccp.imgN);
    ctx.drawImage(dom.fixed_img, a, b, c, c, 0, 0, cfg.needWH, cfg.needWH);
    return canvas.toDataURL(ccp.imgtype, 1);
};
var callback = function () {
    var txt = xmlReq.responseText;
    alert(txt);
    window.opener = null;
    window.open('', '_self');
    window.close();
};
var Y_click = function () {
    var DATA = getDATA();
    DATA == 666 && alert("没有参数");
    DATA == 777 && alert("没有返回地址");
    DATA == 888 && alert("未给出返回图片大小");
    DATA == 999 && alert("图片大小不能超过 1000 X 1000");
    if (DATA == 666 || DATA == 777 || DATA == 888 || DATA == 999) {
        window.opener = null;
        window.open('', '_self');
        window.close();
    }//没有参数或参数错误关闭页面
    method = "post";
    msg = "";
    AJAX(url, method, "DATA=" + DATA, callback);
};
var N_click = function () {
    Hide3(dom.pre, dom.ccp, dom.bt);
};
///////////////////////////////////////////////////
var check_imgtype = function () {
    if (!inArray(ccp.imgtype, cfg.imgtype)) {
        alert("请选择正确的图片类型");
        return false;
    } else { return true; }
};
var check_imgsize = function () {
    if (ccp.imgsize > cfg.imgsize) {
        alert("图片不能超过"+(cfg.imgsize/1024)/1024+"M");
        return false;
    } else { return true; }
};
var set_pre = function () {
    ccp.preaWH = Math.round(ccp.preW * 0.6);
    ccp.prebWH = Math.round(ccp.preW * 0.5);
    ccp.precWH = Math.round(ccp.preW * 0.4);
    ccp.preaL = Math.round((ccp.preW - ccp.preaWH) / 2);
    ccp.prebL = Math.round((ccp.preW - ccp.prebWH) / 2);
    ccp.precL = Math.round((ccp.preW - ccp.precWH) / 2);
    ccp.pre4 = Math.round((ccp.preH - ccp.preaWH - ccp.prebWH - ccp.precWH) / 4);
    ccp.preaT = ccp.pre4;
    ccp.prebT = ccp.pre4 * 2 + ccp.preaWH;
    ccp.precT = ccp.pre4 * 3 + ccp.preaWH + ccp.prebWH;
    setLTWH(dom.prea, ccp.preaL, ccp.preaT, ccp.preaWH, ccp.preaWH);
    setLTWH(dom.preb, ccp.prebL, ccp.prebT, ccp.prebWH, ccp.prebWH);
    setLTWH(dom.prec, ccp.precL, ccp.precT, ccp.precWH, ccp.precWH);
    ////////////////////////////////////////////////////////////////
    ccp.ctnaWH = ccp.preaWH - ccp.ctnLT * 2;
    ccp.ctnbWH = ccp.prebWH - ccp.ctnLT * 2;
    ccp.ctncWH = ccp.precWH - ccp.ctnLT * 2;
    setLTWH(dom.ctna, ccp.ctnLT, ccp.ctnLT, ccp.ctnaWH, ccp.ctnaWH);
    setLTWH(dom.ctnb, ccp.ctnLT, ccp.ctnLT, ccp.ctnbWH, ccp.ctnbWH);
    setLTWH(dom.ctnc, ccp.ctnLT, ccp.ctnLT, ccp.ctncWH, ccp.ctncWH);
    dom.imga.src = dom.imgb.src = dom.imgc.src = ccp.imgURL;
};
var setYN = function (dom, n) {
    ccp.YNWH = ccp.YN_OUTWH - n * 2;
    setStyle(dom, "font-size", Math.floor(ccp.YNWH * 0.9) + "px");
    setLTWH(dom, n, n, ccp.YNWH, ccp.YNWH);
};
var Y_mouseover = function () {
    setYN(dom.Y, ccp.YNLT2);
};
var Y_mouseleave = function () {
    setYN(dom.Y, ccp.YNLT1);
};
var N_mouseover = function () {
    setYN(dom.N, ccp.YNLT2);
};
var N_mouseleave = function () {
    setYN(dom.N, ccp.YNLT1);
};
var set_bt = function () {
    ccp.YN_OUTWH = Math.round(ccp.btW * 0.6);
    ccp.YN_OUTR = Math.round((ccp.btW - ccp.YN_OUTWH) / 2);
    ccp.YN3 = Math.round((ccp.btH - ccp.YN_OUTWH * 2) / 3);
    ccp.Y_OUTT = ccp.YN3;
    ccp.N_OUTT = ccp.YN3 * 2 + ccp.YN_OUTWH;
    setRTWH(dom.Y_OUT, ccp.YN_OUTR, ccp.Y_OUTT, ccp.YN_OUTWH, ccp.YN_OUTWH);
    setRTWH(dom.N_OUT, ccp.YN_OUTR, ccp.N_OUTT, ccp.YN_OUTWH, ccp.YN_OUTWH);
    setYN(dom.Y, ccp.YNLT1);
    setYN(dom.N, ccp.YNLT1);
    AddEvent2(dom.Y, EventsType.mouseover, Y_mouseover, EventsType.mouseleave, Y_mouseleave);
    AddEvent2(dom.N, EventsType.mouseover, N_mouseover, EventsType.mouseleave, N_mouseleave);
};
var setvaried_div = function () {
    if (ccp.imgW > ccp.imgH) {
        ccp.varied_divWH = ccp.imgH < cfg.varied_divDEFAULT ? ccp.imgH : cfg.varied_divDEFAULT;
    }
    else {
        ccp.varied_divWH = ccp.imgW < cfg.varied_divDEFAULT ? ccp.imgW : cfg.varied_divDEFAULT;
    }
    ccp.varied_divL = Math.round((ccp.imgW - ccp.varied_divWH) / 2);
    ccp.varied_divT = Math.round((ccp.imgH - ccp.varied_divWH) / 2);
    ccp.varied_divMaxL = ccp.imgW - ccp.varied_divWH;
    ccp.varied_divMaxT = ccp.imgH - ccp.varied_divWH;
    setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
};
var setvaried_div_img = function () {
    ccp.varied_div_imgL = -ccp.varied_divL;
    ccp.varied_div_imgT = -ccp.varied_divT;
    setLT(dom.varied_div_img, ccp.varied_div_imgL, ccp.varied_div_imgT);
};
var setpreimg = function () {
    var p1, p2, p3;
    p1 = ccp.ctnaWH / ccp.varied_divWH;
    p2 = ccp.ctnbWH / ccp.varied_divWH;
    p3 = ccp.ctncWH / ccp.varied_divWH;
    ccp.imgaW = Math.round(p1 * ccp.imgW);
    ccp.imgaH = Math.round(p1 * ccp.imgH);
    ccp.imgaL = Math.round(p1 * ccp.varied_div_imgL);
    ccp.imgaT = Math.round(p1 * ccp.varied_div_imgT);
    ccp.imgbW = Math.round(p2 * ccp.imgW);
    ccp.imgbH = Math.round(p2 * ccp.imgH);
    ccp.imgbL = Math.round(p2 * ccp.varied_div_imgL);
    ccp.imgbT = Math.round(p2 * ccp.varied_div_imgT);
    ccp.imgcW = Math.round(p3 * ccp.imgW);
    ccp.imgcH = Math.round(p3 * ccp.imgH);
    ccp.imgcL = Math.round(p3 * ccp.varied_div_imgL);
    ccp.imgcT = Math.round(p3 * ccp.varied_div_imgT);
    setLTWH(dom.imga, ccp.imgaL, ccp.imgaT, ccp.imgaW, ccp.imgaH);
    setLTWH(dom.imgb, ccp.imgbL, ccp.imgbT, ccp.imgbW, ccp.imgbH);
    setLTWH(dom.imgc, ccp.imgcL, ccp.imgcT, ccp.imgcW, ccp.imgcH);
};
var set_ccp = function () {
    ccp.ctnL = ccp.preW + 3 + Math.ceil((ccp.ccpW - ccp.imgW) / 2);
    ccp.ctnT = 1 + Math.ceil((ccp.ccpH - ccp.imgH) / 2);
    setLTWH(dom.ctn, ccp.ctnL, ccp.ctnT, ccp.imgW, ccp.imgH);
    ccp.black_coverL = ccp.preW + 3;
    ccp.black_coverT = 1;
    setLTWH(dom.black_cover, ccp.black_coverL, ccp.black_coverT, ccp.ccpW, ccp.ccpH);
    setLTWH(dom.fixed_img, 0, 0, ccp.imgW, ccp.imgH);
    dom.fixed_img.src = ccp.imgURL;
    setvaried_div();
    setWH(dom.varied_div_img, ccp.imgW, ccp.imgH);
    dom.varied_div_img.src = ccp.imgURL;
    setvaried_div_img();
    setpreimg();
};
var setStart = function () {
    set_pre();
    set_bt();
    set_ccp();
    Show3(dom.pre, dom.ccp, dom.bt);
};
var setImgWH = function (src, type) {
    var image = new Image();
    image.onload = function () {
        var width = this.width, height = this.height;//图片的宽高
        var p = width / height;
        if (p > 1) {
            if (p > ccp.ccpW / 50) {
                alert("图片宽高比不能超过" + p);
                return;
            }
            else {
                if (height < 50) {
                    ccp.imgN = height / 50;
                    ccp.imgH = 50;
                    ccp.imgW = Math.round(ccp.imgH * p);
                }
                else if (width > ccp.ccpW) {
                    ccp.imgN = width / ccp.ccpW;
                    ccp.imgW = ccp.ccpW;
                    ccp.imgH = Math.round(ccp.imgW / p);
                }
                else {
                    ccp.imgN = 1;
                    ccp.imgW = width;
                    ccp.imgH = height;
                }
            }
        }
        else {
            if (p < 50 / ccp.ccpH) {
                alert("图片宽高比不能小于" + p);
                return;
            }
            else {
                if (width < 50) {
                    ccp.imgN = width / 50;
                    ccp.imgW = 50;
                    ccp.imgH = Math.round(ccp.imgW / p);
                }
                else if (height > ccp.ccpH) {
                    ccp.imgN = height / ccp.ccpH;
                    ccp.imgH = ccp.ccpH;
                    ccp.imgW = Math.round(ccp.imgH * p);
                }
                else {
                    ccp.imgN = 1;
                    ccp.imgW = width;
                    ccp.imgH = height;
                }
            }
        }
        ccp.imgURL = this.src;
        delete image;
        setStart();
    };
    image.onerror = function () {
        alert("图片已损坏,请上传正确图片");
    };
    image.src = src;
};
var SelectPicture_click = function () {
    dom.upfile = document.createElement("input");
    setAttr2(dom.upfile, "type", "file", "id", "upfile");
    dom.upfile.click();
    dom.upfile.onchange = function () {
        ccp.file = this.files[0];
        ccp.imgtype = ccp.file.type;
        if (!check_imgtype()) {
            return;
        } //检查文件类型
        ccp.imgsize = ccp.file.size;
        if (!check_imgsize()) {
            return;
        }; //检查图片大小
        var reader = new FileReader();
        reader.onload = function () {
            setImgWH(this.result, ccp.imgtype);
        };
        reader.readAsDataURL(ccp.file);
    };
};

ccp.css
*{
    margin:0px;
    padding:0px;
}
#SelectPicture{
    position:absolute;
    border:3px solid #ff6a00;
    border-radius:8px;
    color:#ff6a00;
    text-align:center;
    font-family:'Microsoft YaHei';
    cursor:pointer;
}
#upfile{
    display:none;
}
#pre,#ccp,#bt{
    float:left;
    z-index:1;
    border:1px solid #ffffff;
}
#ccp{
    border:1px dashed #808080;
    border-left:1px dashed #808080;
    border-right:1px dashed #808080;
}
#prea,#preb,#prec{
    position:absolute;
    background-color:#ff6a00;
    border-radius:7px;
}
#ctna,#ctnb,#ctnc{
    position:absolute;
    background-color:#ffffff;
    overflow:hidden;
}
#imga,#imgb,#imgc{
    position:absolute;
    left:0px;
    top:0px;
}
#Y_OUT,#N_OUT{
    position:absolute;
}
#Y,#N{
   /* background-color:#ff6a00;*/
    position:absolute;
    text-align:center;
    border:3px solid #ff6a00;
    border-radius:50%;
    color:#ff6a00;
    font-family:Arial;
    cursor:pointer;
}
#ctn{
    position:absolute;
    background-color:blueviolet;
    overflow:hidden;
}
#black_cover{
    position:absolute;
    background-color:black;
    opacity:0.6;
    z-index:3;
}
#fixed_img{
    position:absolute;
}
#varied_div{
    position:absolute;
    z-index:4;
    overflow: hidden;
    cursor:move;
}
#BottomRight,#TopRight,#TopLeft,#BottomLeft {
	background:#D6FB66;
	display:block;
    width:6px;
	height:6px;
	position:absolute;
	z-index:5;
    bottom:0;
    right:0;
    cursor:nw-resize;
}
#BottomLeft {
    bottom:0;
    left:0;
	cursor:ne-resize;
}
#TopRight {
    top:0;
    right:0;
	cursor:ne-resize;
}
#TopLeft {
    top:0;
    left:0;
	cursor:nw-resize;
}
#varied_div_img{
    position:absolute;
    z-index:5;
}

......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-29 22:59:18  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-11 3:18:12
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --