搜索
首页后端开发php教程 php版本 上妆程序 给图片添加饰物

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

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

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

?

?

?

本文主要采用的技术有

1.jquery的拖拽 drag& drop技术

2.PHP转换Json data

3.CSS3 +HTML5

?

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

<div id="content">
    <div id="background" class="background">
        <img  src="/static/imghwm/default1.png" data-src="background.jpg" class="lazy" id="obj_0"    style="max-width:90%"  style="max-width:90%" alt=" php版本 上妆程序 给图片添加饰物 " >
    </div>
 
    <div id="tools">
    </div>
 
    <div id="objects">
        <div class="obj_item">
            <img class="ui-widget-content lazy" src="/static/imghwm/default1.png" data-src="elements/bowtie.png" id="obj_1"    style="max-width:90%" alt="el">
        </div>
        <div class="obj_item">
            <img class="ui-widget-content lazy" src="/static/imghwm/default1.png" data-src="elements/mus1.png" id="obj_2"    style="max-width:90%" alt="el">
        </div>
        <div class="obj_item">
            <img class="ui-widget-content lazy" src="/static/imghwm/default1.png" data-src="elements/beard.png" id="obj_3"    style="max-width:90%" alt="el">
        </div>
    </div>
 
    <a id="submit"><span></span></a>
 
    <form id="jsonform" action="merge.php" method="POST">
        <input id="jsondata" name="jsondata" type="hidden" value="" autocomplete="off">
    </form>
 
</div>

?采用的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;
}

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

?

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

?

饰品元素 被存储在json data中

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*/
 
            $('<div></div>',{
                className   :   'item'
            }).append(
                $('<div></div>',{
                    className   :   'thumb',
                    html        :   '<img  class="ui-widget-content lazy" src="/static/imghwm/default1.png" data-src="'+objsrc+'"    style="max-width:90%" alt=" php版本 上妆程序 给图片添加饰物 " >'
                })
            ).append(
                $('<div></div>',{
                    className   :   'slider',
                    html        :   '<span>Rotate</span><span class="degrees">0</span>'
                })
            ).append(
                $('<a></a>',{
                    className   :   'remove'
                })
            ).append(
                $('<input>',{
                    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;
                }
            });
        }
    }
});

?下面是整体的php文件

$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 
<p>?</p>

 <div class="clear">
                 
              
              
        
            </div>
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何使用CSS实现元素的旋转背景图动画效果如何使用CSS实现元素的旋转背景图动画效果Nov 21, 2023 am 09:05 AM

如何使用CSS实现元素的旋转背景图动画效果背景图动画效果可以增加网页的视觉吸引力和用户体验。本文将介绍如何使用CSS实现元素的旋转背景图动画效果,并提供具体的代码示例。首先,我们需要准备一张背景图,可以是任何你喜欢的图片,例如一张太阳或者电风扇的图片。将该图片保存并命名为“bg.png”。接下来,创建一个HTML文件,并在文件中添加一个div元素,将其设置为

html的width是什么意思html的width是什么意思Jun 03, 2021 pm 02:15 PM

在html5中,width的意思是宽度,width属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距,只需要给元素设置“元素{width:数值}”即可。

HMD Slate Tab 5G leakes as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia designHMD Slate Tab 5G leakes as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia designJun 18, 2024 pm 05:46 PM

With the Skyline, HMD Global is set to unveil a mid-range smartphone in the style of the Nokia Lumia 920 on July 10. According to the latest information from the leaker @smashx_60, the Lumia design will soon also be used for a tablet, which will be c

Photographer submits real photo to AI image contest, bags the 3rd place before tellingPhotographer submits real photo to AI image contest, bags the 3rd place before tellingJun 16, 2024 pm 06:46 PM

Oneofthecontestsheldby1839Awardsin2024wasspecialinthatsubmissionstoitweretobegeneratedbyartificialintelligenceratherthancreatedwithacamera.ItwasthiscontestthatpiquedthecuriosityofacertainMilesAstray.Insteadofus

CSS 维度属性详解:height 和 widthCSS 维度属性详解:height 和 widthOct 21, 2023 pm 12:42 PM

CSS维度属性详解:height和width在前端开发中,CSS是一种强大的样式定义语言。其中,height和width是两个最基本的维度属性,用于定义元素的高度和宽度。本文将对这两个属性进行详细解析,并提供具体的代码示例。一、height属性height属性用于定义元素的高度。可以使用像素(pixel)、百分比(percentage)或者

css表示width值有哪些方法css表示width值有哪些方法Nov 13, 2023 pm 05:47 PM

方法有像素值、百分比、em单位、rem单位、vw/vh单位、auto、fit-content、min-content、max-content。详细介绍:1、像素值(px):像素值是固定的,不论屏幕分辨率如何变化,它的宽度都是不变的。例如:width: 300px;2、百分比(%):百分比宽度是相对于父元素的宽度的。例如:width: 50%;3、em单位等等。

iframe中width什么意思iframe中width什么意思Sep 19, 2023 pm 12:00 PM

iframe中width是指定框架的宽度的意思,可以控制iframe框架在页面中的宽度展示。width可以接受的值:1、固定像素值,width="300px",框架宽度将始终保持不变,无论浏览器窗口的大小如何变化;2、百分比值,width="50%",框架的宽度将根据其父元素的宽度进行自适应调整;3、自动值,width="auto",框架的宽度将根据其内容的宽度进行自适应调整。

HMD Slate Tab 5G leaks as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia designHMD Slate Tab 5G leaks as mid-range tablet with Snapdragon 7s Gen 2, 10.6-inch display and Lumia designJun 19, 2024 am 12:00 AM

With the Skyline, HMD Global is set to unveil a mid-range smartphone in the style of the Nokia Lumia 920 on July 10. According to the latest information from the leaker @smashx_60, the Lumia design will soon also be used for a tablet, which will be c

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!