圖像管理庫

我有一個小謨，會做basicly 3從您的計算機圖像管理庫

地方以另一個光刻步驟

上傳圖像，只有面部缺少
縮放，旋轉，移動到位
保存muckup，並通過電子郵件發送

它的膠合板的electonis版本，你把你的臉在孔讓你的朋友拍下你的照片。如果你知道http://www.elfyourself.com/就是這樣，沒有跳舞！

問：我知道PHP，jQuery的，Javascript和NO FLASH.Do你知道一個庫已經這樣做了上傳管理規模，旋轉和你怎麼做，如果沒有重新發明輪子

或者it'a一個閃光的東西，你會用到什麼庫？

在此先感謝

來源

2011-09-23 menardmam

這是可以做到一天或使用PHP初二（GD或imagick）和jQuery。用戶可以使用jQuery來操作圖像客戶端，然後將信息發送到服務器，然後服務器將生成一個完整的圖像。前段時間我爲Facebook應用做了類似的事情。 – demux

我可以找到地址嗎？ – menardmam

你有沒有得到它的工作？也許你可以發佈你的腳本？ – demux

從我的評論： 這是可以做到一兩天使用PHP（GD或imagick）和jQuery兩天。用戶可以使用jQuery來操作圖像客戶端，然後將信息發送到服務器，然後服務器將生成一個完整的圖像。前段時間我爲Facebook應用做了類似的事情。

發現：http://apps.facebook.com/gongum_til_gods/?ref=ts

除非你把可移動的圖像的主圖像下你可以使用同樣的方法，然後在上面覆蓋一個無形的div移動墊層圖像。我敢肯定，你會弄明白：對

的源代碼是有點亂，但我有一個時間緊迫：

<?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>

來源

2011-09-26 14:22:37 demux

回答

相關問題