Image not saving properly

Question

This is the link to the project I'm making: http://1-to-n.com/ik/

It is simple you type in anything and press submit, then it goes to the next page and displays the text on the picture. Everything is working great, but when I right click the picture and try to save it the extension is weird like "picture.php.jpe".

The picture generating page code is as followed

<?php
//Set the Content Type
header('Content-type: image/jpeg');

// Create Image From Existing File
$jpg_image = imagecreatefromjpeg('vote.jpg');

// Allocate A Color For The Text
$white = imagecolorallocate($jpg_image, 47, 45, 46);

// Set Path to Font File
$font_path = 'MISTRAL.TTF';

// Set Text to Be Printed On Image
$text = $_POST['name'];

// Print Text On Image
imagettftext($jpg_image, 75, 0, 500, 130, $white, $font_path, $text);

// Send Image to Browser
imagejpeg($jpg_image);

// Clear Memory
imagedestroy($jpg_image);
?>

I tried with Firefox, it saves the picture as `picture.php.jpg`. — Jocelyn, Apr 19 '13 at 15:29
@user2021236, DaveRandom has posted an answer with that code :) — Hanlet Escaño, Apr 19 '13 at 15:31

score 4 · Accepted Answer · answered Apr 19 '13 at 15:30

The solution here is Content-Disposition, but exactly what you want depends how how you want the UI to work.

You want to set:

header('Content-Disposition: %token%; filename="%name_of_file%"');

Where:

%name_of_file% is the name of the file that you want the user to see
%token% is one of attachment or inline. If you set it to attachment, the user will be immediately prompted to download the file, the browser will not display the image as it currently does. If you set inline, the user will be shown the image in the browser pane as they currently are, and they will need to right click -> save as in order to save the image.

You will need to decide on how you want the UI to work before you can determine which header to use.

For clarity, here are a couple of concrete examples:

// Prompt the user to save the file immediately
header('Content-Disposition: attachment; filename="file.jpg"');

// OR

// Display the image to the user and ask them to manually save it
header('Content-Disposition: inline; filename="file.jpg"');

Something worth noting is that IIRC, older versions of IE had issues with inline in that they didn't take any notice of the suggested file name. However this could be worked around by adding a name="" token to the Content-Type:. This is a standards violation but also fairly harmless.

Image not saving properly

1 Answers1