Image managing library
I have a little projet that will do basicly 3 steps
- Upload image from your computer
- place it under another photo, only the face missing
- Scale it, rotate it, move it in place
- save the muckup and send it by email
It's a electonis version of the plywood board you put your face in the hole to have your friend take a photo of you. If you k开发者_C百科now http://www.elfyourself.com/ it's something like that, without the dancing !
QUESTION : I know PHP, jQuery, Javascript and NO FLASH.Do you know a library already done that manage upload-scale-rotate and how do you do that, without reinventing the wheel
Or it'a a thing for flash, wich library will you used ?
Thanks in advance
From my comment: This can be done a day or two days using PHP (gd or imagick) and jQuery. The user can manipulate the image client side using jQuery and then send the info to the server which will then generate a whole image out of the two. I did something similar for a facebook app a while ago.
Found it: http://apps.facebook.com/gongum_til_gods/?ref=ts
You could use the same method except you put the movable image under the main image and then overlay an invisible div on top to move the underlaying image. I'm sure you'll figure it out :p
The source code is a bit messy but I had a tight deadline:
<?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 „Göngum til góðs”<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/> 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> </center>
</div>
<?php
} else {
?>
<h1>Hvernig á að setja fótspor „Göngum til góðs” 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 þú á „Búa til mynd”</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>
加载中,请稍侯......
精彩评论