Библиотека управления изображениями - PullRequest
Новая
       0

Библиотека управления изображениями

0 голосов
/ 23 сентября 2011

У меня есть маленький проект, который будет выполнять в основном 3 шага

  1. Загрузить изображение с вашего компьютера
  2. поместить его под другую фотографию, пропущено только лицо
  3. Масштабируйте, вращайте, перемещайте на место
  4. сохраните макет и отправьте его по электронной почте

Это электронная версия фанерной доски, которую вы кладете лицом в отверстие, чтобы иметьваш друг сфотографирует васЕсли вы знаете, http://www.elfyourself.com/ это что-то подобное, без танцев!

ВОПРОС: Я знаю PHP, jQuery, Javascript и НЕТ FLASH. Знаете ли вы уже созданную библиотеку, которая управляет масштабированием загрузкивращать и как это сделать, не изобретая велосипед

Или это вещь для флеш, какую библиотеку вы будете использовать?

Заранее спасибо

1 Ответ

1 голос
/ 26 сентября 2011

Из моего комментария: Это можно сделать день или два, используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...