Php makeup app adds ornaments to images-php Tutorial

Php makeup program adds ornaments to pictures. it is estimated that you have used mobile phones to make up the whole person. that is, you can add ornaments to the photo processing and then generate an image to entertain you ??? The main technologies used in this article are: 1. jquery drag & amp; drop Technology 2. PHP conversion of Jsondata3.CSS3 + HTML5? First, we will build a general framework & lt; div & php makeup program to add ornaments to images.

It is estimated that everyone has used their cell phones to make up the whole person.

That is to say, adding ornaments to the photo processing and generating an image can entertain you.

?

?

?

The main technologies used in this article are:

1. jquery drag and drop technology

2. PHP converts Json data

3. CSS3 + HTML5

?

First, we will establish a general framework.

? Css

#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;}

? Then there is the drag element and the css style of the image.

?

#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;}

?

Jewelry elements are stored in json data

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

? In addition, the elements can be zoomed in and out, and can be dragged.

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

?

$('#background').droppable({    accept  : '#objects p', /* 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;                }            });        }    }});

? Below is the overall php file

$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);

?