图像管理库

我有一个小谟，会做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

回答

相关问题