php版本 上妝程式 給圖片添加飾物

php版本 化妝程式 給圖片添加飾物

大家估計都用手機玩過 化妝整人的程式

也就是對照片加工處理 添加飾物 然後產生一張圖片 可以搞笑娛樂大家

?

?

?

本文主要採用的技術有

1.jquery的拖拽 drag& drop技術

2.PHP轉換Json data

3.CSS3 +ＨＴＭＬ５

?

首先我們建立一個大體的架構

?採用的ｃｓｓ　

#content{    position:relative;    width:1105px;    height:500px;    margin:40px auto 0px auto;    background-color:#F9F9F9;    -moz-border-radius:6px;    -webkit-border-radius:6px;    border-radius:6px;    -moz-box-shadow:0px 0px 8px #ccc;    -webkit-box-shadow:0px 0px 8px #ccc;    box-shadow:0px 0px 8px #ccc;}.background{    position:absolute;    width:640px;    height:480px;    top:10px;    left:215px;    -moz-box-shadow:0px 0px 3px #bbb;    -webkit-box-shadow:0px 0px 3px #bbb;    box-shadow:0px 0px 3px #bbb;}

?然後是拖拽的元素和圖片的　ｃｓｓ樣式

?

#objects{    width:210px;    height:486px;    top:10px;    left:10px;    position:absolute;}.obj_item{    width:70px;    height:70px;    float:left;}#tools{    width:230px;    top:8px;    right:10px;    position:absolute;    height:420px;    overflow-y:scroll;    overflow-x:hidden;}.item{    border:3px solid #fff;    background-color:#ddd;    height:60px;    position:relative;    margin:2px 5px 2px 2px;    -moz-border-radius:3px;    -webkit-border-radius:3px;    border-radius:3px;    -moz-box-shadow:0px 0px 2px #999;    -webkit-box-shadow:0px 0px 2px #999;    box-shadow:0px 0px 2px #999;}.thumb{    width:50px;    height:50px;    margin:5px;    float:left;}.slider{    float: left;    width: 115px;    margin: 30px 0px 0px 5px;    background-color:#fff;    height:10px;    position:relative;}.slider span{    font-size:10px;    font-weight:normal;    margin-top:-25px;    float:left;}.slider span.degrees{    position:absolute;    right:-22px;    top:20px;    width:20px;    height:20px;}.slider .ui-slider-handle {    width:10px;    height:20px;    outline:none;}a.remove{    width:16px;    height:16px;    position:absolute;    top:0px;    right:0px;    background:transparent url(../images/cancel.png) no-repeat top left;    opacity:0.5;    cursor:pointer;}a.remove:hover{    opacity:1.0;}

?

飾品元素　被儲存在ｊｓｏｎ　ｄａｔａ中

var data = {    "images": [        {"id" : "obj_0" ,"src" : "background.jpg", "width" : "640", "height" : "480"}    ]};

?另外元素可以放大縮小　並且可以拖拽

$('#objects img').resizable({    handles : 'se',    stop    : resizestop}).parent('.ui-wrapper').draggable({    revert  : 'invalid'});

?

$('#background').droppable({    accept  : '#objects div', /* accept only draggables from #objects */    drop    : function(event, ui) {        var $this       = $(this);        ++count_dropped_hits;        var draggable_elem = ui.draggable;        draggable_elem.css('z-index',count_dropped_hits);        /* object was dropped : register it */        var objsrc      = draggable_elem.find('.ui-widget-content').attr('src');        var objwidth    = parseFloat(draggable_elem.css('width'),10);        var objheight   = parseFloat(draggable_elem.css('height'),10);         /* for top and left we decrease the top and left of the droppable element */        var objtop      = ui.offset.top - $this.offset().top;        var objleft     = ui.offset.left - $this.offset().left;         var objid       = draggable_elem.find('.ui-widget-content').attr('id');        var index       = exist_object(objid);        if(index!=-1) { //if exists update top and left            data.images[index].top  = objtop;            data.images[index].left = objleft;        }        else{            /* register new one */            var newObject = {                'id'        : objid,                'src'       : objsrc,                'width'     : objwidth,                'height'    : objheight,                'top'       : objtop,                'left'      : objleft,                'rotation'  : '0'            };            data.images.push(newObject);            /* add object to sidebar*/             $('',{                className   :   'item'            }).append(                $('',{                    className   :   'thumb',                    html        :   ''                })            ).append(                $('',{                    className   :   'slider',                    html        :   'Rotate0'                })            ).append(                $('',{                    className   :   'remove'                })            ).append(                $('',{                    type        :   'hidden',                    value       :   objid       // keeps track of which object is associated                })            ).appendTo($('#tools'));            $('.slider').slider({                orientation : 'horizontal',                max         : 180,                min         : -180,                value       : 0,                slide       : function(event, ui) {                    var $this = $(this);                    /* Change the rotation and register that value in data object when it stops */                    draggable_elem.css({                        '-moz-transform':'rotate('+ui.value+'deg)',                        '-webkit-transform':'rotate('+ui.value+'deg)'                    });                    $('.degrees',$this).html(ui.value);                },                stop        : function(event, ui) {                    newObject.rotation = ui.value;                }            });        }    }});

?下面是整體的ｐｈｐ檔案

$res = JSON_decode(stripslashes($_POST['JSONdata']), true);/* get data */$count_images   = count($res['images']);/* the background image is the first one */$background     = $res['images'][0]['src'];$photo1         = imagecreatefromjpeg($background);$foto1W         = imagesx($photo1);$foto1H         = imagesy($photo1);$photoFrameW    = $res['images'][0]['width'];$photoFrameH    = $res['images'][0]['height'];$photoFrame     = imagecreatetruecolor($photoFrameW,$photoFrameH);imagecopyresampled($photoFrame, $photo1, 0, 0, 0, 0, $photoFrameW, $photoFrameH, $foto1W, $foto1H); /* the other images */for($i = 1; $i < $count_images; ++$i){    $insert         = $res['images'][$i]['src'];    $photoFrame2Rotation = (180-$res['images'][$i]['rotation']) + 180;     $photo2         = imagecreatefrompng($insert);     $foto2W         = imagesx($photo2);    $foto2H         = imagesy($photo2);    $photoFrame2W   = $res['images'][$i]['width'];    $photoFrame2H   = $res['images'][$i]['height'];     $photoFrame2TOP = $res['images'][$i]['top'];    $photoFrame2LEFT= $res['images'][$i]['left'];     $photoFrame2    = imagecreatetruecolor($photoFrame2W,$photoFrame2H);    $trans_colour   = imagecolorallocatealpha($photoFrame2, 0, 0, 0, 127);    imagefill($photoFrame2, 0, 0, $trans_colour);     imagecopyresampled($photoFrame2, $photo2, 0, 0, 0, 0, $photoFrame2W, $photoFrame2H, $foto2W, $foto2H);     $photoFrame2    = imagerotate($photoFrame2,$photoFrame2Rotation, -1,0);    /*after rotating calculate the difference of new height/width with the one before*/    $extraTop       =(imagesy($photoFrame2)-$photoFrame2H)/2;    $extraLeft      =(imagesx($photoFrame2)-$photoFrame2W)/2;     imagecopy($photoFrame, $photoFrame2,$photoFrame2LEFT-$extraLeft, $photoFrame2TOP-$extraTop, 0, 0, imagesx($photoFrame2), imagesy($photoFrame2));}// Set the content type header - in this case image/jpegheader('Content-type: image/jpeg');imagejpeg($photoFrame, $targetfile);imagedestroy($photoFrame);

?

