php+javascript实现头像的切割

最新推荐文章于 2024-11-12 11:19:19 发布

ideal_1983

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量1k

点赞数

文章标签： javascript php function image dst div

本文链接：https://blog.csdn.net/ideal_1983/article/details/5824432

版权

<?php
    if ( empty($_POST) ){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IMAGE</title>
<style type="text/css">
    div{margin:0 auto; text-align:center;}
    #div_image_container {border:2px solid silver; margin:10px auto; width:400px; height:300px; text-align:center;
        overflow:hidden;position:relative;cursor:pointer;}
    #div_image{position:absolute; z-index:-1; border:1px solid pink; top:0px;left:0px;}

#track {position:relative;float:left;}
#icon{cursor:move;position:absolute; top:0px; left:82px;z-index:1}

    .td_gray_top{filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;background-color:#CCCCCC; width:100%; height:100px;}
    .td_gray_left{filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;background-color:#CCCCCC; width:133px; height:100px;}
    .td_nogray{height:98px; +height:100px; width:134px; border:1px solid white;}

    .rb1,.rb2{height:25px; color:#fff; font-size:14px; background:#d32c47; padding:3px 10px; border-left:1px solid #fff; border-top:1px solid #fff; border-right:1px solid #6a6a6a; border-bottom:1px solid #6a6a6a; cursor:pointer;}
    .rb2{background:#C71E3A;}
    .gb1,.gb2{height:25px; color:#333; font-size:14px; background:#e5e5e5; padding:3px 10px; border-left:1px solid #fff; border-top:1px solid #fff; border-right:1px solid #6a6a6a; border-bottom:1px solid #6a6a6a; cursor:pointer;}
    .gb2{background:#ddd;}

</style>

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}

var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}

var Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
}

var BindAsEventListener = function(object, fun) {
    return function(event) {
        return fun.call(object, (event || window.event));
    }
}

var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

//拖放程序
var Drag = Class.create();
Drag.prototype = {
//拖放对象
initialize: function(drag, options) {
    this.Drag = $(drag);//拖放对象
    this._x = this._y = 0;//记录鼠标相对拖放对象的位置
    this._marginLeft = this._marginTop = 0;//记录margin
    //事件对象(用于绑定移除事件)
    this._fM = BindAsEventListener(this, this.Move);
    this._fS = Bind(this, this.Stop);

    this.SetOptions(options);

    this.Limit = !!this.options.Limit;
    this.mxLeft = parseInt(this.options.mxLeft);
    this.mxRight = parseInt(this.options.mxRight);
    this.mxTop = parseInt(this.options.mxTop);
    this.mxBottom = parseInt(this.options.mxBottom);

    this.LockX = !!this.options.LockX;
    this.LockY = !!this.options.LockY;
    this.Lock = !!this.options.Lock;

    this.onStart = this.options.onStart;
    this.onMove = this.options.onMove;
    this.onStop = this.options.onStop;

    this._Handle = $(this.options.Handle) || this.Drag;
    this._mxContainer = $(this.options.mxContainer) || null;

    this.Drag.style.position = "absolute";
    //透明
    if(isIE && !!this.options.Transparent){
        //填充拖放对象
        with(this._Handle.appendChild(document.createElement("div")).style){
            width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";
        }
    }
    //修正范围
    this.Repair();
    addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));
},
//设置默认属性
SetOptions: function(options) {
    this.options = {//默认值
        Handle:            "",//设置触发对象（不设置则使用拖放对象）
        Limit:            false,//是否设置范围限制(为true时下面参数有用,可以是负数)
        mxLeft:            0,//左边限制
        mxRight:        9999,//右边限制
        mxTop:            0,//上边限制
        mxBottom:        9999,//下边限制
        mxContainer:    "",//指定限制在容器内
        LockX:            false,//是否锁定水平方向拖放
        LockY:            false,//是否锁定垂直方向拖放
        Lock:            false,//是否锁定
        Transparent:    false,//是否透明
        onStart:        function(){},//开始移动时执行
        onMove:            function(){},//移动时执行
        onStop:            function(){}//结束移动时执行
    };
    Extend(this.options, options || {});
},
//准备拖动
Start: function(oEvent) {
    if(this.Lock){ return; }
    this.Repair();
    //记录鼠标相对拖放对象的位置
    this._x = oEvent.clientX - this.Drag.offsetLeft;
    this._y = oEvent.clientY - this.Drag.offsetTop;
    //记录margin
    this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;
    this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;
    //mousemove时移动 mouseup时停止
    addEventHandler(document, "mousemove", this._fM);
    addEventHandler(document, "mouseup", this._fS);
    if(isIE){
        //焦点丢失
        addEventHandler(this._Handle, "losecapture", this._fS);
        //设置鼠标捕获
        this._Handle.setCapture();
    }else{
        //焦点丢失
        addEventHandler(window, "blur", this._fS);
        //阻止默认动作
        oEvent.preventDefault();
    };
    //附加程序
    this.onStart();
},
//修正范围
Repair: function() {
    if(this.Limit){
        //修正错误范围参数
        this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);
        this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);
        //如果有容器必须设置position为relative来相对定位，并在获取offset之前设置
        !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative");
    }
},
//拖动
Move: function(oEvent) {
    //判断是否锁定
    if(this.Lock){ this.Stop(); return; };
    //清除选择
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    //设置移动参数
    var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
    //设置范围限制
    if(this.Limit){
        //设置范围参数
        var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;
        //如果设置了容器，再修正范围参数
        if(!!this._mxContainer){
            mxLeft = Math.max(mxLeft, 0);
            mxTop = Math.max(mxTop, 0);
            mxRight = Math.min(mxRight, this._mxContainer.clientWidth);
            mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);
        };
        //修正移动参数
        iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);
        iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);
    }
    //设置位置，并修正margin
    if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }
    if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }
    //附加程序
    this.onMove();
},
//停止拖动
Stop: function() {
    //移除事件
    removeEventHandler(document, "mousemove", this._fM);
    removeEventHandler(document, "mouseup", this._fS);
    if(isIE){
        removeEventHandler(this._Handle, "losecapture", this._fS);
        this._Handle.releaseCapture();
    }else{
        removeEventHandler(window, "blur", this._fS);
    };
    //附加程序
    this.onStop();
}
};

</script>
</head>
<body>

<div id="div_image_container">
    <table id="tab_image" border="0" cellpadding="0" cellspacing="0">
        <tr><td colspan="3"><div class="td_gray_top"></div></td></tr>
        <tr>
            <td><div class="td_gray_left"></div></td>
            <td class="td_nogray"></td>
            <td><div class="td_gray_left"></div></td>
        </tr>
        <tr><td colspan="3"><div class="td_gray_top"></div></td></tr>
    </table>
    <div id="div_image"><img id="image" src="http://www.google.cn/logos/olympics08_basketball.gif" /></div>
</div>

<table align="center">
    <tr>
    <td><img src="image/_h.gif" /></td>
    <td>
        <div id="track"><img src="image/track.gif" /><div id="icon"><img src="image/grip.gif" /></div></div>
    </td>
    <td><img src="image/h.gif" /></td>
    </tr>
</table>

<div>
    <form id="form_image" name="form_image" method="post" action="">
        <input name="x" id="x" type="hidden" value=""/>
        <input name="y" id="y" type="hidden" value=""/>
        <input name="w" id="w" type="hidden" value=""/>
        <input name="h" id="h" type="hidden" value=""/>
        <input name="x1" id="x1" type="hidden" value=""/>
        <input name="y1" id="y1" type="hidden" value=""/>
        <input name="w1" id="w1" type="hidden" value=""/>
        <input name="h1" id="h1" type="hidden" value=""/>

<div>
    <br />图片宽高：<span id="idShow1"></span>
    <br />缩放状态：<span id="idShow">未开始</span>
    <br />参数1：<span id="idShow2"></span>
    <br />参数2：<span id="idShow3"></span>
    <br />拖拽状态：<span id="idShow4">未开始</span>
    <br />POST：<span id="idShow5"></span>
    <br />POST：<span id="idShow6"></span>
</div>

<script type="text/javascript">
if (isIE){    //不同浏览器下的偏移校正
    var fixX = 2, fixY = 2;
}else{
    var fixX = 3, fixY = 2;
}

var showX = 133;    //    截取框宽度,如需改变亦需要调整相应CSS值
var showY = 100;    //    截取框高度，如需改变亦需要调整相应CSS值
var move = 0;    //    缩放比例，0为无
var pole = 82;    //    缩放杆半径长度，如需改变亦需要调整相应图片

var imgWidth = $("div_image").offsetWidth; // 图片宽度
var imgHeight = $("div_image").offsetHeight; // 图片高度

var nowWidth = imgWidth;    //    缩放后的图片宽度
var nowHeight = imgHeight;    //    缩放后的图片高度
var left = showX - fixX/2;    //    图片相对于截取框的横轴距离
var top = showY - fixY/2;    //    图片相对于截取框的纵轴距离

$("idShow1").innerHTML = "width："+imgWidth+"；height:"+imgHeight;

//    初始设置图片居中，并正确设置相关参数
var pubWidth = $("tab_image").offsetWidth;    //    画布宽度
var pubHeight = $("tab_image").offsetHeight;    //    画布高度
$("div_image").style.top = (pubHeight-imgHeight)/2+'px';
$("div_image").style.left = (pubWidth-imgWidth)/2+'px';

$("x").value = (imgWidth - showX)/2;
$("y").value = (imgHeight - showY)/2;
$("w").value = Math.min(showX, imgWidth);
$("h").value = Math.min(showY, imgHeight);

if ( $("x").value > 0 ){
    $("x1").value = 0;
}else{
    $("x").value = 0;
    $("x1").value = (showX - imgWidth)/2;
}

if ( $("y").value > 0 ){
    $("y1").value = 0;
}else{
    $("y").value = 0;
    $("y1").value = (showY - imgHeight)/2;
}
$("w1").value = $("w").value;
$("h1").value = $("h").value;

/
// 最关键的函数，数学关系比较复杂
/
var setPara = function(){

left = $('div_image').offsetLeft;
top = $('div_image').offsetTop;

tmpX = (showX - fixX/2 - left);
tmpY = (showY - fixY/2 - top);

//    默认参数设置
    $("x").value = tmpX ;
    $("y").value = tmpY ;
    $("w").value = showX ;
    $("h").value = showY ;

    $("x1").value = 0 ;
    $("y1").value = 0 ;
    $("w1").value = showX ;
    $("h1").value = showY ;

    var optionX = 0, optionY = 0;
//    横轴一共五种情况：外左中右, 其中左和右均有一种特殊情况：内
    if ( (-1)*tmpX >= showX || tmpX >= nowWidth){    // 外
        optionX = 1;
        $("w").value = 0;
    }else if (tmpX <= 0){    // 左
        optionX = 2;
        $("x").value = 0;
        $("x1").value = (-1)*tmpX;
        $("w").value = (showX + tmpX) * pole / (pole - move);
        $("w1").value = showX + tmpX;

        if ( $("w").value > imgWidth - fixX ){    // 内
            $("w").value = imgWidth - fixX;
            $("w1").value = nowWidth;
        }
    }else if ( tmpX >= 0 && tmpX <= nowWidth - showX - fixX ){    // 中
        optionX = 3;
        $("x").value = tmpX * pole / (pole - move);
        $("w").value = showX * pole / (pole - move);
    }else if (tmpX >= nowWidth - showX - fixX/2 && tmpX <= nowWidth - fixX/2){    // 右
        optionX = 4;
        $("x").value = tmpX * pole / (pole - move);
        $("w").value = (nowWidth - tmpX - fixX)* pole / (pole - move);
        $("w1").value = nowWidth - tmpX - fixX;

        if ( $("w").value > imgWidth - fixX ){    // 内
            $("w").value = imgWidth - fixX;
            $("w1").value = nowWidth;
        }
    }else{    // 保持浏览器兼容性，允许存在的误差，最多1px
        optionX = 5;
//        alert('Diablo in Width!');
    }
//    $("w").value = ($("w").value>imgWidth-fixX)?imgWidth-fixX:$("w").value;

//    纵轴一共五种情况：外上中下, 其中左和右均有一种特殊情况：内
    if ( (-1)*tmpY >= showY || tmpY >= nowHeight){    // 外
        optionY = 1;
        $("h").value = 0;
    }else if(tmpY <= 0){    // 上
        optionY = 2;
        $("y").value = 0;
        $("y1").value = (-1)*tmpY;
        $("h").value = (showY + tmpY) * pole / (pole - move);
        $("h1").value = showY + tmpY;

        if ( $("h").value > imgHeight - fixY ){    // 内
            $("h").value = imgHeight - fixY;
            $("h1").value = nowHeight;
        }
    }else if( tmpY >= 0 && tmpY <= nowHeight - showY - fixY/2 ){    // 中
        optionY = 3;
        $("y").value = tmpY * pole / (pole - move);
        $("h").value = showY * pole / (pole - move);
    }else if (tmpY > nowHeight - showY - fixY && tmpY <= nowHeight - fixY){    // 下
        optionY = 4;
        $("y").value = tmpY * pole / (pole - move);
        $("h").value = (nowHeight - tmpY - fixY)* pole / (pole - move);
        $("h1").value = nowHeight - tmpY - fixY;

        if ( $("h").value > imgHeight - fixY ){    // 内
            $("h").value = imgHeight - fixY;
            $("h1").value = nowHeight;
        }
    }else{    // 保持浏览器兼容性，允许存在的误差，最多1px
        optionY = 5;
//        alert('Diablo in Height!');
    }
//    $("h").value = ($("h").value>imgHeight-fixY)?imgHeight-fixY:$("h").value;
    $("idShow3").innerHTML = optionX +" : "+ optionY;
};    // end function setPara

// 放大缩小效果
var dragIcon = new Drag("icon", { mxContainer: "track", Handle: "icon", Limit: true, LockY: true,
    onStart: function(){ $("idShow").innerHTML = "开始拖放"; },
    onMove: function(){
        var x = this.Drag.offsetLeft;
        $("idShow").innerHTML = "left："+ x +"；top:"+this.Drag.offsetTop;

        move = pole - x;
        nowWidth = imgWidth - imgWidth * move / pole;
        nowHeight = imgHeight - imgHeight * move / pole;
        $("idShow2").innerHTML = "move:"+move;
        $("idShow1").innerHTML = "now width:"+nowWidth + "；now height:"+nowHeight;

        $("image").style.height = nowHeight+"px";
        $("image").style.width = nowWidth+"px";
        $("div_image").style.height = nowHeight+"px";
        $("div_image").style.width = nowWidth+"px";

        setPara();
        $("idShow4").innerHTML = "x："+$("x").value + "；y:"+$("y").value + "; w："+$("w").value + "; h："+$("h").value + "; tmpX："+tmpX+ "; tmpY："+tmpY;

    },
    onStop: function(){
        $("idShow").innerHTML = "结束拖放";
        setPara();
        $("idShow5").innerHTML = "x："+$("x").value + "；y:"+$("y").value + "; w："+$("w").value + "; h："+$("h").value;
        $("idShow6").innerHTML = "x1："+$("x1").value + "；y1:"+$("y1").value + "; w1："+$("w1").value + "; h1："+$("h1").value;
    }
});

//    拖拽移动效果
var dragImage = new Drag("div_image", { mxContainer: "div_image_container", Handle: "tab_image",
    onStart: function(){ $("idShow4").innerHTML = "开始拖放"; },
    onMove: function(){
        left = this.Drag.offsetLeft;
        top = this.Drag.offsetTop;
        setPara();
        $("idShow4").innerHTML = "x："+$("x").value + "；y:"+$("y").value + "; w："+$("w").value + "; h："+$("h").value + "; tmpX："+tmpX+ "; tmpY："+tmpY;
    },
    onStop: function(){
        left = this.Drag.offsetLeft;
        top = this.Drag.offsetTop;

        setPara();
        $("idShow5").innerHTML = "x："+$("x").value + "；y:"+$("y").value + "; w："+$("w").value + "; h："+$("h").value;
        $("idShow6").innerHTML = "x1："+$("x1").value + "；y1:"+$("y1").value + "; w1："+$("w1").value + "; h1："+$("h1").value;
    }
});

</script>

</body>
</html>

<?php

} else {

// 参数设置：

// 目标图像宽高和画质
$targ_w = 133;$targ_h = 100;
$jpeg_quality = 90;
// 源文件和目标文件地址
$src = 'http://www.google.cn/logos/olympics08_basketball.gif';
$output_filename = 'demo2.jpg';
// 根据源文件MIME类型建立图像
$img_r = imagecreatefromgif($src);
// 根据目标文件宽高建立图像
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

$thisfilename = basename($_SERVER['PHP_SELF']);

$img_x = $_POST['x'];
$img_y = $_POST['y'];
$img_w = $_POST['w'];
$img_h = $_POST['h'];

$dst_x = $_POST['x1'];
$dst_y = $_POST['y1'];
$dst_w = $_POST['w1'];
$dst_h = $_POST['h1'];

$_POST = array();
/*
$dst_x = 5;
$dst_y = 5;
$dst_w = 133;
$dst_h = 100;
*/

// 填充背景色
$white = imagecolorallocate($dst_r,255,255,255);
imagefill($dst_r,0,0,$white);

if ( $img_w && $img_h ){
    // 写新图像
    imagecopyresampled($dst_r,$img_r, $dst_x,$dst_y, $img_x,$img_y, $dst_w,$dst_h, $img_w,$img_h);
    //    imagecopyresampled($dst_r,$img_r,0,0,$x,$y, $targ_w,$targ_h,$w,$h);
}
// 输出到图像页面
// Comment out the header() call
//    header('Content-type: image/jpeg');
//    imagejpeg($dst_r, null, $jpeg_quality);
//    输出到文件
    imagejpeg($dst_r, $output_filename, $jpeg_quality);

// 释放内存
imagedestroy($img_r);
imagedestroy($dst_r);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BASE</title>
<style type="text/css">

#div1 {border:1px solid white; margin:10px auto; width:100px; text-align:center;}

#div2 {border:1px solid orange; margin:10px auto; width:200px; padding-top:24px; padding-bottom:24px; text-align:center;}

    #div3 {border:1px solid blue; margin:10px auto; width:300px; height: 270px; text-align:center; position: relative;}
    #div3 div {position:absolute; top: 45%; left:50%;}
    #div3 div div {position:relative; top: -50%; left:-50%;}

</style>
<script language="javascript" type="text/javascript" src="jq.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
/*

JQ code

*/
});
</script>

</head>
<body>

</body>
</html>
<?php
}