i want to combine text and image on the fly to create a jpg widget. I want to do this for a fundraising website, i will need to update the image once a day so it reflect the updated fundraising progress bar. The reason why i want a jpg (image) widget is because it is much more friendly to add to blogs, website etc.
you can do it with gd
//open up the image you want to put text over
$im = imagecreatefromjpeg($imagePath);
//The numbers are the RGB values of the color you want to use
$black = ImageColorAllocate($im, 255, 255, 255);
//The canvas's (0,0) position is the upper left corner
//So this is how far down and to the right the text should start
$start_x = 10;
$start_y = 20;
//This writes your text on the image in 12 point using verdana.ttf
//For the type of effects you quoted, you'll want to use a truetype font
//And not one of GD's built in fonts. Just upload the ttf file from your
//c: windows fonts directory to your web server to use it.
Imagettftext($im, 12, 0, $start_x, $start_y, $black, 'verdana.ttf', 'text to write');
//Creates the jpeg image and sends it to the browser
//100 is the jpeg quality percentage
Imagejpeg($im, '', 100);
ImageDestroy($im);
I'd suggest you look into Imagemagick.
http://php.net/manual/en/book.imagick.php
Related
I want to create a logo or profile avatar from first letters of name, like Google. Is there any method or service to do it?
I am tried to learn the code about make image with php but it's to hard. One time I found a website about this dynamic image text but I don't find.
Most easy examples you will find online are going to use PHP's imagecreate and imagestring functions, such as this one:
https://phppot.com/php/how-to-convert-text-to-image-using-php/
Here is a quick example-code I've put together based on the above link, that creates an image similar to the Google avatars:
$img = imagecreate(250, 250);
$textbgcolor = imagecolorallocate($img, 52, 152, 219);
$textcolor = imagecolorallocate($img, 255, 255, 255);
$txt = "AB";
$fontfile = "/arial.ttf";
imagettftext($img, 100, 0, 35, 170, $textcolor , $fontfile, $txt);
ob_start();
imagepng($img);
printf('<img src="data:image/png;base64,%s"/ width="100">', base64_encode(ob_get_clean()));
You will need place the arial.ttf fontfile in the same directory as your PHP file for this to work.
However, in most fonts that are aesthetically pleasing, letters do not have the same width. So you will find it difficult to center the text, since you can't use the same X value for the anagram "MM" and "II". I would advise you to use a library that has extended functions like aligning text to the middle, and my bet would be on gd-text.
I need to merge the following images, however my solution is not working.
My code is the following (I pass the URL of the images to the script via GET parameter)
<?php
$dest = imagecreatefrompng($_GET['img1']);
$src = imagecreatefrompng($_GET['img2']);
imagecopymerge($dest, $src, 0, 0, 0, 0, 1500, 1500, 50);
$white = imagecolorallocate($dest, 255, 255, 255);
imagecolortransparent($dest, $white);
header('Content-Type: image/png');
imagepng($dest);
?>
Both image are PNG with transparent background and both are 1500x1500.
First image:
Second image:
What I get:
Why can't I make the final image have the right opacity? I tried changing the last value of imagecopymerge() to 0 or 100 but in those cases I only get one image or another. I need them both, exactly overlapped on one another!
Also, if you look carefully around the gem in the final image, there is some extra blue color... how is this possible?
This is caused by setting the resulting image to use image transparency rather than per-pixel alpha-channel transparency by your call to imagecolortransparent which sets any white (#ffffff) pixels to 100% transparent.
The artefacts ('extra blue colour' and edge pixels) on the resulting image are caused by the alpha-channel transparency from the original images not being saved and the pixels (which were 100% transparent but not white) showing their original colour.
The 'washed out' look of your result comes from telling imagecopymerge to merge the two images with 50% transparency.
The solution is to use the correct alpha settings:
<?php
$dest = imagecreatefrompng($_GET['img1']);
$src = imagecreatefrompng($_GET['img2']);
imagesavealpha($dest, true);
imagecopy($dest, $src, 0, 0, 0, 0, 1500, 1500);
header('Content-Type: image/png');
imagepng($dest);
I am trying to create an image from an another image using PHP. Here is my code:
<?php
$width = 109;
$height = 109;
$image = imagecreatetruecolor($width, $height);
$source_under = imagecreatefrompng('ecloid_under.png');
$black = imagecolorallocate($image, 0x00, 0x00, 0x00);
imagecolortransparent($image, $black);
imagecopy($image, $source_under, 0, 0, 0, 0, $width, $height);
header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>
So I am loading this image in $source_under
and copying it over a transparent blank "canvas" image. Here is the result of that operation:
As can be seen, there is a sort of black border around the whole initial image. I think this is due to the fact that initially, the "canvas" image is all black. So there is something wrong with the transparency and the anti-aliasing of the image.
This isn't the first time I have a similar problem, but last time the source image was the cause. This time around, opening it in Photoshop does not show any potential problems with it.
Does anyone know how to fix this?
Can you try to enable alpha blending on $image before you copy the original to it:
imagealphablending($image, true);
Second try would be to create a transparent color and to fill $image with that color before the copy.
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $transparent);
imagealphablending($image, true);
You have partial transparency around the edges of your source image. That makes it combine with the black of the canvas image (which you normally can't see because it's 100% transparent), giving the results you see. You could avoid this by making sure your entire alpha channel on the source image is either 100% or 0%, or by choosing a more appropriate base color for your canvas image (i.e. one that matches the background color scheme of your site).
Fabio Anselmo's comment would help in that GIFs don't have a real alpha channel -- GIF transparency is all-or-nothing -- so saving as one will accomplish the 100%-or-0% solution. Unless you're extremely careful it will also give you a "border" right there in the source image -- made up of whatever background color you have or select in the GIF conversion -- as a result of your image's antialiasing. (However, the interlacing part is irrelevant.)
I am using this code to creating images with text written in it with transparent backgrounds.
<?php
// Set the content-type
header('Content-Type: image/gif');
// Create the image
$im = imagecreatetruecolor(400, 150);
// Create some colors
$black = imagecolorallocate($im, 0, 0, 0);
$acolor = imagecolorallocate($im, 153, 204, 153);
imagecolortransparent($im, $black);
// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'arial.ttf';
// Add the text
imagettftext($im, 50, 0, 10, 100, $acolor, $font, $text);
// Using imagegif()
imagegif($im,"img.gif");
imagedestroy($im);
?>
But text which is written in img.gif has some unwanted color(Black) on borders of alphabets('e,s,n,g'). How can i finish that color.The generated image is
The arial font download site is http://code.google.com/p/ireader/downloads/detail?name=arial.ttf
The GIF format cannot handle alpha transparency. It can have only 100% transparent (= invisible), or 100% opaque (= visible) pixels.
Your text seems to have anti-aliased, soft edges.
Those edges aren't 100% transparent, but they're also not 100% opaque - they are a mixture of foreground and background. That makes them appear softer.
Because the GIF format can't deal with these nuances, the library uses a mixture of green and black to simulate a "weaker" green.
If you use the PNG format, the problem should go away: PNG supports alpha transparency. There are some issues that you need to look into if you still need to support IE6, but for every other browser, this will work fine straight away.
I have a watermark script I am working on, the results are good on PNG and on JPG images however a gif image, not so good. I am using PHP and GD
Below you can see the difference in quality of the watermark.
Anyone know how to improve this?
For the gif version I am using
$image = imagecreatefromgif($source_file);
imagecopymerge($image, $watermark, $x, $y, 0, 0, $water_width, $water_height, 65);
imagegif($image, $source_file);
gif image = bad quality
gif image http://img2.pict.com/fd/46/00/1471179/0/gif.gif
jpg image = good
jpg image http://img2.pict.com/82/a1/5a/1471181/0/jpg.jpg
GIF images have a fixed palette that can contain a maximum of 256 colors. The issue here is probably that the image your inserting uses colors that isn't available in the target image.
I have never tried this, but it might be worth a shot. You could try converting the gif image to a true color image first, then do the watermarking and after that converting it back to gif.
$image = imagecreatefromgif($source_file);
// create a true color image of the same size
$image2 = imagecreatetruecolor(imagesx($image), imagesy($image));
// copy the original gif image on to the true color image
imagecopy($image2, $image, 0, 0, 0, 0, imagesx($image), imagesy($image));
// copy the watermark onto the new true color image
imagecopymerge($image2, $watermark, $x, $y, 0, 0, $water_width, $water_height, 65);
// write the new image to disk
imagegif($image2, $source_file);
Try it and see if it makes a difference.
There's also a couple of palette manipulation functions available that might help:
imagecolormatch()
imagetruecolortopalette()
imagepalettecopy()
I'm not sure how you would apply them, but I'm guessing that there's a few things you could do to improve the results.
GIF only supports a color palette of 256 colors. Therefore, the colors of your watermark image have to be mapped to this palette. This caused them to be rendered and saved with different colors than before. Due to this small palette, GIF is not recommended for photos in general, anyways.
GIF images will never look great, as the colour palette is 256 colours. As MrMage says, colour mapping causes a severe approximation of the true colours of the image. You are better off with PNGs, they do support transparency.