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