im using php and heroku to create some images for my facebook app, but the images arent shown, only picture of an broken image is shown.
Im using sample code from php tutorial website.
<?php
// Create a 100*30 image
$im = imagecreate(100, 30);
// White background and blue text
$bg = imagecolorallocate($im, 255, 255, 255);
$textcolor = imagecolorallocate($im, 0, 0, 255);
// Write the string at the top left
imagestring($im, 5, 0, 0, 'Hello world!', $textcolor);
// Output the image
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>
The code is in located in /src/texttopic.php
Heroku logs shows no errors.
Call the image like so:
<img src="/src/texttopic.php" height="30" width="30">
Set the image height / width accordingly.
Keep in mind that with heroku, if you have 2 or more web dynos running, the image creation may take place on one dyno, but when you request the image, you may be calling another dyno that does not have that image.
Related
I'm trying to create images from dynamic text data in GD and put a logo in the top corner. The background color of the image will change based on the data passed in so I can't just save the logo as an image with no alpha channel.
I create the image, fill it with the dynamic background color using imagefill(), then add the text using imagettftext() and then load my logo in. I'm having a problem getting the logo into the image without it keeping its background color of 'transparent'. So I would like it to have the dynamic background color behind it that is set with imagefill(). However, it keeps the transparency background it was loaded in with and so writes this part of the png as transparent. I tried calling imagefill() on the logo after it had been loaded in (using the same rgb that sets the background of the destination image) but this didn't do anything.
Below is my code:
$background = $_GET['background'];
$data1 = $_GET['data1'];
$data2 = $_GET['data2'];
$r = $_GET['r'];
$g = $_GET['g'];
$b = $_GET['b'];
$png_image = imagecreate(400, 200);
$gd_text_color = imagecolorallocate($png_image, 255, 255, 255);
$gd_background_color = imagecolorallocate($png_image, $r, $g, $b);
imagefill($png_image, 0, 0, $gd_background);
$text1 = "test test $data1";
$text2 = "test test again $data2";
$font = 'Lato-regular.ttf';
imagettftext($png_image, 18, 0, 20, 20, $gd_text_color, $font, $text1);
imagettftext($png_image, 18, 0, 20, 50, $gd_text_color, $font, $text2);
//trying to get this logo and place it in the corner.
$logo = imagecreatefrompng("images/logo.png");
imagecopy($png_image, $logo, 10, 10, 0, 0, 100, 30);
header('Content-type: image/png');
imagepng($png_image, $filename);
imagedestroy($png_image);
Here's the output of that code: http://i.imgur.com/n25h9Js.png
And here's what the image looks like when loaded into a program that accepts an alpha channel: http://i.imgur.com/3OIRupN.png
Does anyone know how I'd achieve what I'm attempting?
Thanks for your time.
EDIT
To try and explain what I want here's another image. The top image is what I currently get, and the bottom image is what I want. I'm simply trying to load in a transparent PNG that can sit ontop of different colored backgrounds. However I either get it like how it is shown here (transparent background) or as a black background (because I guess the alpha channel isn't being looked at?). Hope this helps. Image:
Edit 2
As per the comment below, I changed it from imagecreate() to imagecreatetruecolor() and now it works fine! I would love an explanation why this solved it if anyone has the time but for now, thank you all who commented or even spent your time looking at this question.
I suspect your imagecreate() may be causing you problems as it creates a palettised image which doesn't have the flexibility or breadth of expression of a true-colour image.
I suggest you replace it with imagecreatetruecolor().
I have an image customizing plugin having stage of 1000x700 where user can upload his/her pic and design it with in stage area.
Now if user doesn't use full staging area and use only some part of stage let say 800x400. My final image will be of 1000x700 with transparent background having user's design in middle of it.
Now question is, I want to stretch user design on full canvas with out white background.
How can I do this using php GD or imagick (not manually)?
$dstImage = imagecreatetruecolor(1000, 700);
$black = imagecolorallocate($dstImage, 0, 0, 0);
// Make the background transparent
imagecolortransparent($dstImage, $black);
$srcImage = imagecreatefrompng('srcImg.png');
imagecopymerge($dstImage, $srcImage, 0, 0, 0, 800, 400, 1000, 700);
imagepng($dstImage, 'outputNewImg.png');
imagefill is only filling half the image background?
Anyone got any ideas?
$img = imagecreatefrompng($current);
$kek=imagecolorallocate($img, 255, 255, 255);
imagefill($img,0,0,$kek);
imagejpeg($img,$new,70);
imagedestroy($img);
imagefill perform a Flood-Fill algorithm to the image, same as bucket fill in paint does. so filling continues until the area is closed, and filling will be stopped.
You should copy original image into larger canvas, then perform an imagefill, then crop the image agian to get back to original size:
$img = imagecreatefrompng($current);
$width=imagesx($img);
$height=imagesy($img);
$newimg=imagecreatetruecolor($width+2,$height+2);//1 pixcel larger from each side
imagecopy($newimg,$img,1,1,0,0,$width,$height);
$kek=imagecolorallocate($img, 255, 255, 255);
imagefill($img,0,0,$kek);
imagecopy($img,$newimg,0,0,1,1,$width-2,$height-2);//back to the original size
imagejpeg($img,$new,70);
I didn't test the code, but I think it should be OK.
Is it possible to add a watermark when someone downloads an image from your website? If yes, what's the best way to do it?
Thanks in advance.
If you mean when Right Click -> Saveing it, thats not possible I'm afraid.
If you generally mean that you have a dedicated download button or link, You could make It would redirect the request through a PHP file that will add the needed watermark and generate a new image file for download.
I have a better idea.
Since you said you wanna protect stuff when people Right Click and Select Save As. So, we can use the way how 9gag does.
Create an image with a fixed size of footer. Use a negative margin parent of the size of the footer of the bottom margin. Give overflow: hidden; so that the users cannot see the watermark, which is hidden from the view. Now when the users right click and save as image, they will have the watermark. Altogether, there is no place where the image is without watermark. So, while uploading the image, use the above said techniques to add the watermark.
Or, if you would like to make separate watermarked images, then you can check the hotlinked files and then serve watermarked images.
header("content-type: image/jpeg");
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");};
$_u=parse_url($_SERVER['HTTP_REFERER']);
$_u=preg_replace("/(www.)/i","",strtolower($_u['host']));
$_i=$_SERVER['HTTP_HOST'];
$_i=preg_replace("/(www.)/i","",strtolower($_i));
if ($_u != $_i){
//handle this with gd or redirect
}
Follow the instructions in this tutorial to make the watermark on the picture.
I would suggest using a function imagecopymerge() to ad watermarks in php http://www.php.net/manual/en/function.imagecopymerge.php but as mentioned: they should be added before loading them in the browser. When user downloads them (right-click) then they're already served to their browser (and are usually in cache).
Ofcourse you could serve all images dynamically and check the http_referer on image load. And if that's missing or not an expected one (file isn't being loaded from your webpage) then add a water-mark but that's not foolproof.
Please check following url same in this site , this ll help you lot
http://www.phpjabbers.com/put-watermark-on-images-using-php-php20.html
Following are from the above link
<?php
function watermarkImage ($SourceFile, $WaterMarkText, $DestinationFile) {
list($width, $height) = getimagesize($SourceFile);
$image_p = imagecreatetruecolor($width, $height);
$image = imagecreatefromjpeg($SourceFile);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width, $height);
$black = imagecolorallocate($image_p, 0, 0, 0);
$font = 'arial.ttf';
$font_size = 10;
imagettftext($image_p, $font_size, 0, 10, 20, $black, $font, $WaterMarkText);
if ($DestinationFile<>'') {
imagejpeg ($image_p, $DestinationFile, 100);
} else {
header('Content-Type: image/jpeg');
imagejpeg($image_p, null, 100);
};
imagedestroy($image);
imagedestroy($image_p);
};
?>
<?php
$SourceFile = 'image1.jpg';//image path
$DestinationFile = 'images/image1-watermark.jpg'; //Out put path
$WaterMarkText = 'Copyright Watermark text';
watermarkImage ($SourceFile, $WaterMarkText, $DestinationFile);
?>
A simple PHP script that I picked up from stackoverflow generates a PNG with a transparent background, writes some text on it then directly outputs it to the client browser:
$font = 25;
$string = 'My Text';
$im = #imagecreatetruecolor(300, 300);
imagesavealpha($im, true);
imagealphablending($im, false);
$white = imagecolorallocatealpha($im, 255, 255, 255, 127);
$red = imagecolorallocate($im, 255, 0, 0);
imagefill($im, 0, 0, $white);
$lime = imagecolorallocate($im, 204, 255, 51);
imagettftext($im, $font, 0, 0, 30, $red, "fonts/tt0588m_.ttf", $string);
header("Content-type: image/png");
imagepng($im);
imagedestroy($im);
The scope is to obtain a simple service that feeds an image based on the parameters passed to it via URL, such as Google Charts (e.g. this QR code image).
So far, so good, except that if I click on the image generated with the code above and want to save it, the browser doesn't recognize it as being a PNG image, but a PHP script (Save as type selector has this option only), as oposed to the Google Charts example, where the resource is clearly identified as a PNG file.
How do I achieve this correct resource identification by the browser?
Browser will use the filename from the URL as the default value in the "Save as..." dialog. You can type another name of course or save the file using the suggested name (text.php) and rename it afterwards.
You can use the Content-disposition header to "suggest" a filename to the browser. Here is an example:
header("Content-type: image/png");
header("Content-disposition: inline; filename=mytext.png");
inline suggests that browser should attempt to display the image. Change it to attachment to suggest that the browser should display the "Save as..." or similar dialog.
filename= should contain the filename of your choice.