I'm trying to use the font-awesome stack on a commercial web development project, and we have got it to a working stage, however we are left with one problem.
When viewing our websites on a mobile devices (or a browser without imported font stack support) all of our icons are replaced with squares (because font-awesome uses Unicode chars to represent the icons).
This breaks a lot of the way our website looks and feels (especially the custom admin panel we have coded).
The solution we came up with was to fall back to using PHP to render an image containing the icon we want (with the colour we want specified as an argument, along with size etc)
This has never been a problem before, but now I'm having huge trouble getting PHP to render the Private Use Area (PUA) chars.
Here is some sample code I'm trying to use:
<?php
$icons = array(
"icon-glass" => "\f000",
"icon-music" => "\f001",
"icon-search" => "\f002",
// [...]
);
$font = "_assets/fonts/font-awesome/fontawesome-webfont.ttf";
if(isset($_GET['icon'])) {
$chr = $icons[$_GET['icon']];
header("Content-type: image/png");
$img = imagecreatetruecolor($_GET['w'], $_GET['h']);
imagealphablending($img, true);
$transparent = imagecolorallocatealpha( $img, 0, 0, 0, 127 );
imagefill( $img, 0, 0, $transparent );
$black = imagecolorallocate($img, 255, 0, 0);
imagettftext($img, 20, 0, 32, 32, $black, $font, $chr);
imagesavealpha($img, true);
imagepng($img);
exit;
}
?>
<div style="background-color:black; width:64px; height:64px;">
<img src="dev?icon=icon-dashboard&w=64&h=64">
</div>
<br />
<div style="background-color:blue; width:64px; height:64px;">
<img src="dev?icon=icon-bolt&w=64&h=64">
</div>
However this seems to just render the squares inside the image. I'm thinking this is because I'm inputting the unicode chars badly to PHP and it's possibly something really silly that I'm missing.
Any suggestions are welcome.
The PHP code I used to render Font Awesome TTF glyphs (mostly):
$text = json_decode('""');
...
imagesavealpha($im, true);
$trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans);
imagealphablending($im, true);
$fontcolor = imagecolorallocatealpha($im, 0, 0, 0, 0);
// Add the text
imagettftext($im, $x, 0, 0, 0, $fontcolor, $font, $text);
imagesavealpha($im, true);
imagepng($im);
imagedestroy($im);
The json-decode() handles the complexity of the unicode character. I used a GD version 2 or greater so had to use points instead of pixels.
My full class takes into account the desired height, but ignores width. You can view it at https://github.com/sperelson/awesome2png.
Related
I am starting on php and am trying to create an image using php-gd, but keep getting a weird output.
I am using xampp.
Here's my code: (a black line should be seen into the screen)
<?php
header ("Content-type: image/png");
$image = imagecreate(200, 50);
$black = imagecolorallocate($image, 0, 0, 0);
ImageLine ($image, 30, 30, 120, 120, $black);
imagepng($image);
?>
I tried with many samples found in the internet but i keep getting
, for anything I'm trying to do. (from showing text to creating a watermark). I use examples already tested by others, so the code isn't probably the problem.
Could you please say me what is wrong?
Edit : I am actually on the right window
(my file is stored at C:\xampp\htdocs\projet_30_03_21\template.php)
Edit : Ctrl+F5 doesn't work either. Also tried creating a new window.
You could use imagefill() to define a background before to add a black line, because the background is already black.
It's also recommanded to use imagecreatetruecolor() instead of imagecreate().
$image = imagecreatetruecolor(200, 50);
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
imagefill($image, 0, 0, $white);
imageline($image, 30, 30, 120, 120, $black);
header("Content-type: image/png");
imagepng($image);
Give the following image
Found the problem (https://www.php.net/manual/fr/install.windows.legacy.index.php#install.windows.legacy.building).
I had to uncomment this line of code :
;extension=gd
to
extension=gd.
I'm useing Joomla 1.5. I have the script for create image with text over It, but It doesn't work for me:
<?php
// Set the content-type
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = "ARIAL.TFF";
// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>
I don't understand why this doesn't work. I found many examples in google, I used It, but always the same.
This error in english means: Image "http://juokoera.lt/a.php" can't be shown, because It have problems (errors).
I found in google, that can be fault by my hosting, I changed It, but the same problem. Help me, please if you can. Thank you very much.
UPDATED:
I got the same error when, code looks like:
dasfasdf
dfas
<?php
header('Content-Type: image/png');
$im = imagecreatetruecolor(400, 30);
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
$text = 'Testing...';
$font = "ARIAL.TTF";
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
imagepng($im);
imagedestroy($im); ?>
How can I use additional text in the same php?
I think your problem is here:
$font = "ARIAL.TFF";
in fact, on your server a file named "ARIAL.TFF" doesn't exist, the font extension you are looking for is TTF, not TFF, and in fact "ARIAL.TTF" on your server exists and i just downloaded it, correct that line to:
$font = "ARIAL.TTF";
After that, you should be able to write text on your image
Hope this helps
UPDATE
After question update, i noticed that an header is sent after printing out some text.
Nothing has to be printed out before the header() function, in order for headers to be correctly sent.
In the PHP manual>header() it is the first thing that is explained:
Remember that header() must be called before any actual output is sent, either by normal HTML tags, blank lines in a file, or from PHP. It is a very common error to read code with include, or require, functions, or another file access function, and have spaces or empty lines that are output before header() is called. The same problem exists when using a single PHP/HTML file.
i want to add a white box around some text i add to an image via GD-Lib.
but i don't know how to do this best.
Here is my current code:
<?php
$textImg = imagecreatefromjpeg($tempImage);
$black = imagecolorallocate($textImg, 0, 0, 0);
$font = 'lib/verdana.ttf';
// Add the text
imagettftext($textImg, 20, 0, imagesx($textImg)*$textData['x']/100, imagesy($textImg)*$textData['y']/100, $black, $font, $textData['text']);
imagejpeg($textImg,$tempImage,$jpegQuality);
?>
I hope you can help me out.
You can use imagettfbbox() to get the coordinates of the bounding box by passing the same settings you use for the text itself (same text, font and size etc).
Once you have these coordinates you can use imagerectangle() to draw a border around the text, or you can use imagefilledrectangle() to draw a solid rectangle. Be sure to call it before you render the text with imagettftext()
A basic example is below but will need some tweaking as most of it is from memory and I suspect the $x and $y calculation could be done better as it probably doesn't work with varying canvas sizes as it is now. However, it demonstrates the principle.
// Set the content-type
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $black);
// The text to draw
$text = 'Testing';
// Replace path by your own font path
$font = 'verdana.ttf';
// Add the text
$bbox = imagettfbbox(20, 0, $font, $text);
$x = $bbox[1] + (imagesx($im) / 2) - ($bbox[4]);
$y = $bbox[3] + (imagesy($im) / 2) - ($bbox[5]);
imagerectangle($im, 0, 0, $x, $y, $white);
imagettftext($im, 20, 0, 0, 20, $white, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagejpeg($im);
imagedestroy($im);
I've tried to write text in an image just for testing purposes because my Zabbix install is not writing text in the graphs. I've copied the code bellow from the php.net website (http://php.net/manual/en/function.imagettftext.php)
<?php
// Set the content-type
header('Content-Type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = '/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf';
// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>
Does anyone have an idea?
I've figure out what was the problem here. Permissions to access the truetype file. PHP could not access the file so it couldn't write.
I was not seeing the problem because I was not running with E_ALL. Now everything is running smoothly
My issue was a wrong offset. The image was showing nothing, no text, no errors in the source code, just a blank file. The paths were correct. I thought there was an error in the ttf font but turns out it was just wrong positioning.
Here's what helped me to see a bit of the text:
imagettftext($im, 20, 0, 20, 20, $fg, $font, $text);
This shows a bit of text on the top right.
Full working code:
putenv('GDFONTPATH=' . dirname(__FILE__));
$font = 'arial'; // located next to the script
imagettftext($im, 20, 0, 20, 20, $fg, $font, $text);
It is a GD function and you will need php-gd installed with gettext & ttf support.
-$
What is the best way to display underlined text and output the result as image with GD or any other library?
You can try using the Unicode underline combining character U+0332.
<?php
// Set the content-type
header('Content-type: image/png');
// Create the image
$im = imagecreatetruecolor(400, 30);
// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);
// The text to draw
$text = "̲U̲d̲e̲r̲l̲i̲n̲e";
// Replace path by your own font path
$font = 'arial.ttf';
// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);
// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);
?>
There are lots of FREE PHP CAPTCHA out there that come with a lot of customization, download one and see what exactly happens behind the scene. Also have a look at this link
HTH
I am using this...
$font = imageloadfont($font_file);
$font_width = ImageFontWidth($font);
$font_height = ImageFontHeight($font);
$str_width = strlen($text)*$font_width;
ImageLine($image, $left, $top+$font_height, $left+$str_width, $top+$font_height, $color);