Add decorations to the image on the PHP version

PHP Version Makeup program to add ornaments to the picture

You're probably using a mobile phone to play makeup.

That is, the processing of photos to add jewelry and then create a picture can be funny entertainment everyone

?

?

?

The main techniques used in this paper are

1.jquery drag-and-drop drag& drop technology

2.PHP Convert JSON data

3.CSS3 +HTML5

?

First, we build a broad framework

? CSS in use

#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 the CSS style of the dragged element and the picture

?

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

?

The jewelry element is stored in JSON data.

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

In addition, the elements can be scaled up and dragged

$ (' #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-$thi        S.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 OB            Ject is associated}). AppendTo ($ (' #tools '));         $ ('. Slider '). Slider ({orientation: ' horizontal ', max:180, min : -180, value:0, Slide:function (event, UI) {var $thi                    s = $ (this);                        /* Change the rotation and register, which value in data object, when it stops */Draggable_elem.css ({ '-moz-transform ': ' Rotate (' +ui.value+ ' deg) ', '-webkit-transform ': ' Rotate (' +ui.va                    (lue+ ' 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 BA Ckground image is the first one */$background = $res [' images '][0][' src ']; $photo 1 = imagecreatefromjpeg ($backgr ound); $foto 1W = Imagesx ($photo 1), $foto 1H = Imagesy ($photo 1), $photoFrameW = $res [' Images '][0][' width '];$ Photoframeh = $res [' images '][0][' height ']; $photoFrame = Imagecreatetruecolor ($photoFrameW, $photoFrameH); imagecopyr Esampled ($photoFrame, $photo 1, 0, 0, 0, 0, $photoFrameW, $photoFrameH, $foto 1W, $foto 1H);    /* The other images */for ($i = 1; $i < $count _images; + + $i) {$insert = $res [' images '] [$i] [' src '];     $photoFrame 2Rotation = (180-$res [' images '] [$i] [' rotation ']) + 180;     $photo 2 = imagecreatefrompng ($insert);    $foto 2W = Imagesx ($photo 2);    $foto 2H = Imagesy ($photo 2);    $photoFrame 2W = $res [' images '] [$i] [' width '];     $photoFrame 2H = $res [' images '] [$i] [' height ']; $photoFrame2top = $res [' images '] [$i] [' top '];     $photoFrame 2left= $res [' images '] [$i] [' left '];    $photoFrame 2 = Imagecreatetruecolor ($photoFrame 2W, $photoFrame 2H);    $trans _colour = Imagecolorallocatealpha ($photoFrame 2, 0, 0, 0, 127);     Imagefill ($photoFrame 2, 0, 0, $trans _colour);     Imagecopyresampled ($photoFrame 2, $photo 2, 0, 0, 0, 0, $photoFrame 2W, $photoFrame 2H, $foto 2W, $foto 2H);    $photoFrame 2 = imagerotate ($photoFrame 2, $photoFrame 2Rotation, -1,0); /*after rotating calculate the difference of new height/width with the one before*/$extraTop = (Imagesy ($photoFra    me2)-$photoFrame 2H)/2;     $extraLeft = (Imagesx ($photoFrame 2)-$photoFrame 2W)/2; Imagecopy ($photoFrame, $photoFrame 2, $photoFrame 2left-$extraLeft, $photoFrame 2top-$extraTop, 0, 0, Imagesx ($ photoFrame2), Imagesy ($photoFrame 2));} Set The content Type header-in this case image/jpegheader (' content-type:image/jpeg '); imagejpeg ($photoFrame, $TARGETF ile); Imagedestroy ($photoFrame);

?

