Question

我有一个基本上可以完成3个步骤的项目

从您的计算机上传图片
将它放在另一张照片下，只有缺少的脸
缩放，旋转，移动到位
保存muckup并通过电子邮件发送

这是胶合板的电子版本，你把脸放在洞里，让你的朋友拍你的照片。如果你知道http://www.elfyourself.com/就是这样，没有跳舞！

问题：我知道PHP，jQuery，Javascript和NO FLASH。你知道一个库已经完成了管理upload-scale-rotate，你怎么做，不用重新发明轮子

或者它是flash的东西，你会使用哪个库？

提前致谢

Answer 1

来自我的评论： 这可以使用PHP（gd或imagick）和jQuery在一天或两天内完成。用户可以使用jQuery操作图像客户端，然后将信息发送到服务器，然后服务器将生成两者中的整个图像。我刚刚为facebook应用做了类似的事情。

找到它：http://apps.facebook.com/gongum_til_gods/?ref=ts

除了将可移动图像放在主图像下，然后在顶部覆盖不可见的div以移动底层图像之外，您可以使用相同的方法。我相信你会弄明白的：p

源代码有点乱，但我的截止日期很紧：

<?php
require_once 'facebook-php-sdk/src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'xxx',
  'secret' => 'xxx',
  'cookie' => true,
));

$session = $facebook->getSession();

$me = null;
if ($session) {
  try {
    $uid = $facebook->getUser();
    $me = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
  }
}
if(!$me) {
    $url =   "https://graph.facebook.com/oauth/authorize?"
            ."client_id=xxx&"
            ."redirect_uri=http://apps.facebook.com/gongum_til_gods/&"
            ."scope=user_photos,publish_stream";
    ?>
    <!doctype html>
    <html xmlns:fb="http://www.facebook.com/2008/fbml">
        <head>
            <title>Göngum til góðs</title>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
            <script language=javascript>window.open('<?php echo $url ?>', '_parent', '')</script>
        </head>

        <body>
            Hleð....
        </body>
    </html>

    <?php
    exit;
} else {
    $path = 'photos/'.$uid.'.jpeg';
    $photo_url = 'https://graph.facebook.com/'.$uid.'/picture/?type=large';
    $photo_url_small = 'https://graph.facebook.com/'.$uid.'/picture/';

    $watermark = imagecreatefrompng('spor.png');
    $watermark_width = imagesx($watermark);  
    $watermark_height = imagesy($watermark);


    $image = imagecreatefromjpeg($photo_url);
    $image_width = imagesx($image);  
    $image_height = imagesy($image);

    $canvas = imagecreatetruecolor($image_width, $image_height);

    imagecopy($canvas, $image, 0, 0, 0, 0, $image_width, $image_height);

    # ratio is less than 1 if the image is smaller than 200px;
    if($image_height < $watermark_height) {
        $ratio = $image_height / 200;
    } else {
        $ratio = 1;
    }

    #downscale the image only if the height of the profile picture is less than 200px;
    $new_width = $watermark_width * $ratio;
    $new_height = $watermark_height * $ratio;

    #lower right corner:
    $dest_y = $image_height - $new_height;
    $dest_x = $image_width - $new_width;

    $commit = isset($_REQUEST['commit']);   
    if($commit) {
        $x = $_REQUEST['x'];
        $y = $_REQUEST['y'];
        $r = $_REQUEST['ratio'];

        #downscale to request ratio.
        $new_width = $watermark_width * $r;
        $new_height = $watermark_height * $r;
        imagecopyresampled($canvas, $watermark, $x, $y, 0, 0, $new_width, $new_height, $watermark_width, $watermark_height);

        imagejpeg($canvas, $path, 100);

        imagedestroy($canvas);
        imagedestroy($image);
        imagedestroy($watermark);

        $facebook->setFileUploadSupport(true);

        $args = array('message' => 'Göngum til góðs');
        $args['image'] = '@' . realpath($path);

        $data = $facebook->api('/me/photos', 'post', $args);
    }
    elseif(isset($_REQUEST['set_status'])) {
        $data = $facebook->api('/me/feed', 'post', array(
            'message' => $_REQUEST['set_status'],
            'picture' => 'http://static.jl.is/gtg/img/logo1.png',
            'link' => 'http://apps.facebook.com/gongum_til_gods/',
            'name' => 'GÖNGUM TIL GÓÐS',
            'caption' => 'Smelltu hér til að vera með',
            'description' => "Vertu einn af 3000 sjálfboðaliðum og settu fótspor á myndina þína. Landssöfnun Rauða krossins, Göngum til góðs, fer fram laugardaginn 2. október. Þá verður þörf fyrir 3000 sjálfboðaliða og eru því allir sem vettlingi geta valdið hvattir til þátttöku. Söfnunarfénu verður varið til verkefna Rauða kross Íslands í Afríku. Sérstaklega er um barna- og ungmennaverkefni í Malaví og Síerra Leóne að ræða. Í Malaví þar sem verkefnin fara æ vaxandi, aðstoðar Rauði krossinn börn sem eiga um sárt að binda vegna alnæmis og í Síerra Leóne er unnið að stuðningi við stríðshrjáð börn og barnahermenn."
        ));

        print_r($data);

        exit;
    }

    $photo_url = $photo_url.'&no-cache='.mt_rand(1,9999);
}
?>

<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <title>Göngum til góðs</title>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 

        <link type="text/css" rel="stylesheet" href="style.css" />

        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

        <script src="script.js"></script>

        <script type="text/javascript">
            var overlay_height = <?php echo $new_height ?>;
            var overlay_width = <?php echo $new_width ?>;
            var overlay_pos_x = <?php echo $dest_x ?>;
            var overlay_pos_y = <?php echo $dest_y ?>;

            var image_height = <?php echo $image_height ?>;
            var image_width = <?php echo $image_width ?>;

            $(document).ready(function() {
                $('#img-container .overlay').each(function() {
                    $(this).height(overlay_height);
                    $(this).width(overlay_width);
                    $(this).css({top: overlay_pos_y, left: overlay_pos_x});
                    $(this).draggable({
                        containment: 'parent',
                        stop: function(event, ui) {
                            var pos = $(this).position();
                            overlay_pos_x = pos.left;
                            $('#x-axis').val(pos.left);

                            overlay_pos_y = pos.top;
                            $('#y-axis').val(pos.top);
                        }
                    })
                });

                $('#slider').slider({
                    min: 0.65,
                    max: <?php echo $ratio; ?>,
                    step: 0.001,
                    value: <?php echo $ratio; ?>,
                    slide: function(event, ui) {
                        var height = ui.value * <?php echo $watermark_height ?>;
                        var width = ui.value * <?php echo $watermark_width ?>;

                        if(height + overlay_pos_y > image_height) {
                            $('#img-container .overlay').css({top: image_height - height});
                        }
                        if(width + overlay_pos_x > image_width) {
                            $('#img-container .overlay').css({left: image_width - width});
                        }
                        $('#img-container .overlay').height(height);
                        $('#img-container .overlay').width(width);
                        $('#ratio').val(ui.value);
                    }
                });

                $('#status-update input').autoGrowInput({
                    comfortZone: 10,
                    minWidth: 67,
                    maxWidth: 200
                }).keyup();

                $('#status-update input').focus(function() {
                    if($(this).val() == 'mína götu') {
                        $(this).val('').keyup();
                    }
                });
                $('#status-update input').blur(function() {
                    if($(this).val() == '') {
                        $(this).val('mína götu').keyup();
                    }
                });

                $('#status-update button').click(function() {
                    // get the parent li
                    var $p = $(this).parent();

                    // replace input with input value
                    var input_string = $p.find('input').val();
                    $p.find('input').after(input_string);
                    $p.find('input').remove();
                    $p.find('tester').remove();

                    // remove all buttons
                    $('#status-update button').remove();

                    // get clean text before appending ajax-loader
                    var text = $p.html();

                    // show ajax loader gif
                    $p.append('<img class="ajax-loader" src="img/ajax-loader.gif" />');

                    // send ajax request to self
                    $.ajax({
                        type: "POST",
                        data: "set_status= " + text,
                        success: function(msg) {
                            //remove ajax-loader on success
                            $('.ajax-loader').remove();
                            //show that the ajax call was successful
                            $p.append('<img class="ajax-loader" src="img/loaded.png" />');
                            //show a facebook link:
                            $('#fb-back').show();
                            //alert(msg);
                        }/*,
                        error: function() {
                            alert('Ajax request error!');
                        }*/
                    });
                });

            });
        </script>

        <style type="text/css">
            #status-update li {
                background-image:url('<?php echo $photo_url_small ?>');
            }
        </style>
    </head>
  <body>
    <div id="fb-root"></div>
    <script>
        (function() {
            var e = document.createElement('script');
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }());

        window.fbAsyncInit = function() {
            FB.init({
                appId   : '<?php echo $facebook->getAppId(); ?>',
                session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
                status  : true, // check login status
                cookie  : true, // enable cookies to allow the server to access the session
                xfbml   : true // parse XFBML
            });

            // whenever the user logs in, we refresh the page
            FB.Event.subscribe('auth.login', function() {
                window.location.reload();
            });
        };
    </script>

    <?php
    if($me) {
        if($commit or isset($_GET['test_commit'])) {
    ?>

    <div style="position:relative;height:230px;">
        <div style="position:relative;z-index:1;">
            <h1>Núna ertu búin/-n að setja &bdquo;Göngum til góðs&rdquo;<br/>
            fótspor inná mynd í myndasafni</h1>

            <ol>
                <li>Farðu inn í myndasafn</li>
                <li>Veldu myndina</li>
                <li>Gerðu hana að forsíðumynd</li>
            </ol>
        </div>

        <img style="float:none;position:absolute;right:-10px;top:-20px;z-index:0;" src="img/instructions.png" />

        <img style="float:none;position:absolute;right:265px;top:143px;z-index:1;" src="img/rarr-tp.png" />

        <div style="position:absolute;bottom:0;left:0;z-index:2;" class="line"></div>

    </div>

    <div style="position:relative;z-index:2;width:380px;float:left;">
        <p style="margin-left:10px;">Hér fyrir neðan eru nokkrar tillögur að<br/>&nbsp;&nbsp;skilaboðum sem hægt er að setja inn.</p>

        <ul id="status-update">
            <li>Ég tek <input type="text" name="street" value="mína götu" /> laugardaginn 2. október!<button></button></li>
            <li>Ég geng til góðs á laugardaginn, en þú?<button></button></li>
            <li>Ég ætla að ganga til góðs laugardaginn 2. október!<button></button></li>
        </ul>

        <img src="img/logo2.png" style="margin-top:60px;"/>
    </div>

    <div style="float:left;width:340px;margin: 50px 0 0 40px;">
        <h1><a target="_NEW" href="http://rki.is/flex/gtg/" style="color:inherit;text-decoration:none;">Skráðu þig hér til að taka<br/>þátt í göngunni</a></h1>
        <p>Kærar þakkir fyrir að taka þátt í þessu með okkur hérna á Facebook. Sjáumst í göngunni, laugardaginn 2. október.<br/>Hvert skref skiptir máli.</p>

        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <center><a id="fb-back" target="_parent" href="http://www.facebook.com">Fara aftur á facebook</a>&nbsp;&nbsp;&nbsp;&nbsp;</center>
    </div>



    <?php
        } else {
    ?>

    <h1>Hvernig á að setja fótspor &bdquo;Göngum til góðs&rdquo; inn á Facebook mynd</h1>

    <ol>
        <li>Forritið velur forsíðumyndina sem þú ert að nota núna</li>
        <li>Hægt er að færa fótspor með því að draga það til og/eða breyta stærð þess með því að færa stikuna</li>
        <li>Þegar þú ert ánægð/-ur með myndina ýtir þú á &bdquo;Búa til mynd&rdquo;</li>
        <li>Nýja myndin birtist í nýju myndasafni og þar getur þú gert hana að forsíðumynd</li>
    </ol>


    <div id="lwrapper">
        <div id="images">
            <div class="bg left source">
                <img src="<?php echo $photo_url ?>" />
            </div>

            <div class="bg float">
                <div id="img-container" style="height:<?php echo $image_height ?>px">
                    <img class="photo" src="<?php echo $photo_url ?>" />
                    <img class="overlay" src="spor.png" />
                </div>
            </div>

            <div class="clr"></div>
        </div>

        <div id="extra">
            <img id="logo" class="left" src="img/logo.png" />

            <div class="left pa">   
                <div id="slider"></div>

                <img id="darr" src="img/darr.png" style="margin: 18px 0 18px 86px;" />

                <div class="clr"></div>

                <div id="buttons" style="text-align:center;">       
                    <form method="POST">
                        <input type="hidden" id="ratio" name="ratio" value="<?php echo $ratio ?>"/>
                        <input type="hidden" id="x-axis" name="x" value="<?php echo $dest_x ?>"/>
                        <input type="hidden" id="y-axis" name="y" value="<?php echo $dest_y ?>"/>
                        <input type="submit" name="commit" value="Búa til mynd" />
                    </form>
                </div>
            </div>

            <div class="clr"></div>
        </div>
    </div>

    <?php
        }
    }
    ?>
  </body>
</html>

图像管理库

1 个答案: