0

I'm using this code to merge text with an image and it's working fine. But when I use this code with Facebook app, it doesn't show any output. Can anyone please help me sorting out the problem? As far as I believe, the problem is with this line:

header("Content-Type: image/jpeg"); 

When I remove it, it shows some messed up output.

<?php 
header("Content-Type: image/jpeg"); 
$im = ImageCreateFrompng("jump_empty.png");  
$black = ImageColorAllocate($im, 255, 255, 255);
$start_x = 10; 
$start_y = 20; 
Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'ambient.ttf', "hellooo"); 
Imagejpeg($im, '', 100); 
ImageDestroy($im); 
?>

Here is the code I'm using for Facebook app:

<?php
include_once 'facebook.php';
include_once 'config.php';

$facebook = new Facebook(array(
    'appId' => FACEBOOK_APP_ID,
    'secret' => FACEBOOK_SECRET_KEY,
    'cookie' => true,
    'domain' => '_____'
));
header("Content-Type: image/jpeg");
$session = $facebook->getSession();
if (!$session) {
    $url = $facebook->getLoginUrl(array(
        'canvas' => 1,
        'fbconnect' => 0,
        'req_perms' => 'read_stream,publish_stream'
    ));
    echo "<script type='text/javascript'>top.location.href = '$url';</script>";
} else {
    try {
        $uid = $facebook->getUser();
        $me  = $facebook->api('/me');
        echo "Hey " . $me['name'] . "!<br />";
        $im      = ImageCreateFrompng("jump_empty.png");
        $black   = ImageColorAllocate($im, 255, 255, 255);
        $start_x = 10;
        $start_y = 20;
        Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'ambient.ttf', 'hello');
        Imagejpeg($im, '', 100);
        ImageDestroy($im);
    }
    catch (FacebookApiException $e) {
        echo "Error:" . print_r($e, true);
    }
}
?>
Smi
  • 13,850
  • 9
  • 56
  • 64
Anurag
  • 141
  • 1
  • 3
  • 12

1 Answers1

5

The problem is that you are trying to deliver two different content types in one page. You cannot send the image/jpeg header, telling the browser to expect an image, and then send js and or html. To accomplish this you should use two php scripts. One that sends the image/jpeg header and generates the image as you have in your first code block, and a second with normal headers that includes the first as the src of an image tag. If you want your image to be dynamic you could pass parameters to the image script as you would any php page.

Your first script lets call it image.php would then be:

<?php 

header("Content-Type: image/jpeg"); 

$im = ImageCreateFrompng("jump_empty.png");  

$black = ImageColorAllocate($im, 255, 255, 255); 

$start_x = 10; 
$start_y = 20; 

Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'ambient.ttf', "hellooo"); 

Imagejpeg($im, '', 100); 

ImageDestroy($im); 

?>

Just as you had it. You second script would be:

<?php

include_once 'facebook.php';
include_once 'config.php';

$facebook = new Facebook(array(
'appId'  => FACEBOOK_APP_ID,
'secret' => FACEBOOK_SECRET_KEY,
'cookie' => true,
'domain' => '_____'
));

$session = $facebook->getSession();

if (!$session) {

$url = $facebook->getLoginUrl(array(
        'canvas' => 1,
        'fbconnect' => 0,
        'req_perms' => 'read_stream,publish_stream',

));

echo "<script type='text/javascript'>top.location.href = '$url';</script>";

} else

 {

try {
$uid = $facebook->getUser();
$me = $facebook->api('/me');
echo "Hey " . $me['name'] . "!<br />";
echo '<img src="image.php">';
}
catch (FacebookApiException $e) {
 echo "Error:" . print_r($e, true);
}
}
?>

Hope this helps.

Ravenex
  • 621
  • 3
  • 10
  • but i need a small help from you. what if the text that i'm going to use is from facebook instead of hello. For eg i hv a facebook app which writes fb user's name on the image. – Anurag Dec 19 '11 at 14:26
  • 1
    I was actually tempted to extend my example to do that but I didn't want to confuse the original issue. Since the "image" is actually a php script it can accept query parameters like any other script. The image tag line would be something like: echo ''; and the image.php script would then use $_REQUEST['name'] for generating the text. We used something similar in a FB game to generate a map here: https://liquidfyre.com/petdragonstwo/mapmarker.php?scale=16&markers[]=0,3462,1682&markers[]=0,6475,922 – Ravenex Dec 20 '11 at 02:39