search
HomeBackend DevelopmentPHP Tutorial 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>
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)