当前位置：Gxlcms > PHP教程 > php版本上妆程序给图片添加饰物

php版本上妆程序给图片添加饰物

时间：2021-07-01 10:21:17 帮助过：4人阅读

php版本 化妆程序 给图片添加饰物

大家估计都用手机玩过 化妆整人的程序

也就是对照片加工处理 添加饰物 然后生成一张图片 可以搞笑娱乐大家

?

?

?

本文主要采用的技术有

1.jquery的拖拽 drag& drop技术

2.PHP转换Json data

3.CSS3 +ＨＴＭＬ５

?

首先我们建立一个大体的框架

  1.     
  2.         <img id="obj_0" width="640" height="480" src="https://www.gxlcms.com/background.jpg">
  3.     
  4.  
  5.     
  6.     
  7.  
  8.     
  9.         
  10.             <img id="obj_1" width="50" class="ui-widget-content" src="https://www.gxlcms.com/elements/bowtie.png" alt="el">
  11.         
  12.         
  13.             <img id="obj_2" width="50" class="ui-widget-content" src="https://www.gxlcms.com/elements/mus1.png" alt="el">
  14.         
  15.         
  16.             <img id="obj_3" width="50" class="ui-widget-content" src="https://www.gxlcms.com/elements/beard.png" alt="el">
  17.         
  18.     
  19.  
  20.     <span></span>
  21.  
  22.     
  23.

?采用的ｃｓｓ　

  1. #content{
  2.     position:relative;
  3.     width:1105px;
  4.     height:500px;
  5.     margin:40px auto 0px auto;
  6.     background-color:#F9F9F9;
  7.     -moz-border-radius:6px;
  8.     -webkit-border-radius:6px;
  9.     border-radius:6px;
  10.     -moz-box-shadow:0px 0px 8px #ccc;
  11.     -webkit-box-shadow:0px 0px 8px #ccc;
  12.     box-shadow:0px 0px 8px #ccc;
  13. }
  14. .background{
  15.     position:absolute;
  16.     width:640px;
  17.     height:480px;
  18.     top:10px;
  19.     left:215px;
  20.     -moz-box-shadow:0px 0px 3px #bbb;
  21.     -webkit-box-shadow:0px 0px 3px #bbb;
  22.     box-shadow:0px 0px 3px #bbb;
  23. }

?然后是拖拽的元素和图片的　ｃｓｓ样式

?

  1. #objects{
  2.     width:210px;
  3.     height:486px;
  4.     top:10px;
  5.     left:10px;
  6.     position:absolute;
  7. }
  8. .obj_item{
  9.     width:70px;
  10.     height:70px;
  11.     float:left;
  12. }
  13. #tools{
  14.     width:230px;
  15.     top:8px;
  16.     right:10px;
  17.     position:absolute;
  18.     height:420px;
  19.     overflow-y:scroll;
  20.     overflow-x:hidden;
  21. }
  22. .item{
  23.     border:3px solid #fff;
  24.     background-color:#ddd;
  25.     height:60px;
  26.     position:relative;
  27.     margin:2px 5px 2px 2px;
  28.     -moz-border-radius:3px;
  29.     -webkit-border-radius:3px;
  30.     border-radius:3px;
  31.     -moz-box-shadow:0px 0px 2px #999;
  32.     -webkit-box-shadow:0px 0px 2px #999;
  33.     box-shadow:0px 0px 2px #999;
  34. }
  35. .thumb{
  36.     width:50px;
  37.     height:50px;
  38.     margin:5px;
  39.     float:left;
  40. }
  41. .slider{
  42.     float: left;
  43.     width: 115px;
  44.     margin: 30px 0px 0px 5px;
  45.     background-color:#fff;
  46.     height:10px;
  47.     position:relative;
  48. }
  49. .slider span{
  50.     font-size:10px;
  51.     font-weight:normal;
  52.     margin-top:-25px;
  53.     float:left;
  54. }
  55. .slider span.degrees{
  56.     position:absolute;
  57.     right:-22px;
  58.     top:20px;
  59.     width:20px;
  60.     height:20px;
  61. }
  62. .slider .ui-slider-handle {
  63.     width:10px;
  64.     height:20px;
  65.     outline:none;
  66. }
  67. a.remove{
  68.     width:16px;
  69.     height:16px;
  70.     position:absolute;
  71.     top:0px;
  72.     right:0px;
  73.     background:transparent url(../images/cancel.png) no-repeat top left;
  74.     opacity:0.5;
  75.     cursor:pointer;
  76. }
  77. a.remove:hover{
  78.     opacity:1.0;
  79. }

?

饰品元素　被存储在ｊｓｏｎ　ｄａｔａ中

  1. var data = {
  2.     "images": [
  3.         {"id" : "obj_0" ,"src" : "https://www.gxlcms.com/background.jpg", "width" : "640", "height" : "480"}
  4.     ]
  5. };

?另外元素可以放大缩小　并且可以拖拽

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

?

  1. $('#background').droppable({
  2.     accept  : '#objects div', /* accept only draggables from #objects */
  3.     drop    : function(event, ui) {
  4.         var $this       = $(this);
  5.         ++count_dropped_hits;
  6.         var draggable_elem = ui.draggable;
  7.         draggable_elem.css('z-index',count_dropped_hits);
  8.         /* object was dropped : register it */
  9.         var objsrc      = draggable_elem.find('.ui-widget-content').attr('src');
  10.         var objwidth    = parseFloat(draggable_elem.css('width'),10);
  11.         var objheight   = parseFloat(draggable_elem.css('height'),10);
  12.  
  13.         /* for top and left we decrease the top and left of the droppable element */
  14.         var objtop      = ui.offset.top - $this.offset().top;
  15.         var objleft     = ui.offset.left - $this.offset().left;
  16.  
  17.         var objid       = draggable_elem.find('.ui-widget-content').attr('id');
  18.         var index       = exist_object(objid);
  19.         if(index!=-1) { //if exists update top and left
  20.             data.images[index].top  = objtop;
  21.             data.images[index].left = objleft;
  22.         }
  23.         else{
  24.             /* register new one */
  25.             var newObject = {
  26.                 'id'        : objid,
  27.                 'src'       : objsrc,
  28.                 'width'     : objwidth,
  29.                 'height'    : objheight,
  30.                 'top'       : objtop,
  31.                 'left'      : objleft,
  32.                 'rotation'  : '0'
  33.             };
  34.             data.images.push(newObject);
  35.             /* add object to sidebar*/
  36.  
  37.             $('',{
  38.                 className   :   'item'
  39.             }).append(
  40.                 $('',{
  41.                     className   :   'thumb',
  42.                     html        :   '<img width="50" class="ui-widget-content" src="https://www.gxlcms.com/'+objsrc+'">'
  43.                 })
  44.             ).append(
  45.                 $('',{
  46.                     className   :   'slider',
  47.                     html        :   '<span>Rotate</span><span class="degrees">0</span>'
  48.                 })
  49.             ).append(
  50.                 $('',{
  51.                     className   :   'remove'
  52.                 })
  53.             ).append(
  54.                 $('<input>',{
  55.                     type        :   'hidden',
  56.                     value       :   objid       // keeps track of which object is associated
  57.                 })
  58.             ).appendTo($('#tools'));
  59.             $('.slider').slider({
  60.                 orientation : 'horizontal',
  61.                 max         : 180,
  62.                 min         : -180,
  63.                 value       : 0,
  64.                 slide       : function(event, ui) {
  65.                     var $this = $(this);
  66.                     /* Change the rotation and register that value in data object when it stops */
  67.                     draggable_elem.css({
  68.                         '-moz-transform':'rotate('+ui.value+'deg)',
  69.                         '-webkit-transform':'rotate('+ui.value+'deg)'
  70.                     });
  71.                     $('.degrees',$this).html(ui.value);
  72.                 },
  73.                 stop        : function(event, ui) {
  74.                     newObject.rotation = ui.value;
  75.                 }
  76.             });
  77.         }
  78.     }
  79. });

?下面是整体的ｐｈｐ文件

  1. $res = JSON_decode(stripslashes($_POST['JSONdata']), true);
  2. /* get data */
  3. $count_images   = count($res['images']);
  4. /* the background image is the first one */
  5. $background     = $res['images'][0]['src'];
  6. $photo1         = imagecreatefromjpeg($background);
  7. $foto1W         = imagesx($photo1);
  8. $foto1H         = imagesy($photo1);
  9. $photoFrameW    = $res['images'][0]['width'];
  10. $photoFrameH    = $res['images'][0]['height'];
  11. $photoFrame     = imagecreatetruecolor($photoFrameW,$photoFrameH);
  12. imagecopyresampled($photoFrame, $photo1, 0, 0, 0, 0, $photoFrameW, $photoFrameH, $foto1W, $foto1H);
  13.  
  14. /* the other images */
  15. for($i = 1; $i < $count_images; ++$i){
  16.     $insert         = $res['images'][$i]['src'];
  17.     $photoFrame2Rotation = (180-$res['images'][$i]['rotation']) + 180;
  18.  
  19.     $photo2         = imagecreatefrompng($insert);
  20.  
  21.     $foto2W         = imagesx($photo2);
  22.     $foto2H         = imagesy($photo2);
  23.     $photoFrame2W   = $res['images'][$i]['width'];
  24.     $photoFrame2H   = $res['images'][$i]['height'];
  25.  
  26.     $photoFrame2TOP = $res['images'][$i]['top'];
  27.     $photoFrame2LEFT= $res['images'][$i]['left'];
  28.  
  29.     $photoFrame2    = imagecreatetruecolor($photoFrame2W,$photoFrame2H);
  30.     $trans_colour   = imagecolorallocatealpha($photoFrame2, 0, 0, 0, 127);
  31.     imagefill($photoFrame2, 0, 0, $trans_colour);
  32.  
  33.     imagecopyresampled($photoFrame2, $photo2, 0, 0, 0, 0, $photoFrame2W, $photoFrame2H, $foto2W, $foto2H);
  34.  
  35.     $photoFrame2    = imagerotate($photoFrame2,$photoFrame2Rotation, -1,0);
  36.     /*after rotating calculate the difference of new height/width with the one before*/
  37.     $extraTop       =(imagesy($photoFrame2)-$photoFrame2H)/2;
  38.     $extraLeft      =(imagesx($photoFrame2)-$photoFrame2W)/2;
  39.  
  40.     imagecopy($photoFrame, $photoFrame2,$photoFrame2LEFT-$extraLeft, $photoFrame2TOP-$extraTop, 0, 0, imagesx($photoFrame2), imagesy($photoFrame2));
  41. }
  42. // Set the content type header - in this case image/jpeg
  43. header('Content-type: image/jpeg');
  44. imagejpeg($photoFrame, $targetfile);
  45. imagedestroy($photoFrame);

?

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！