i want to create an image from html, i couldn't use painty since it is outdated and no longer working and i want something similar.
i have already tried to create image using GD library like this
<?php
$html_code = "<b> this is the body </b> ";
// Create the image
$img = imagecreate("300", "600");
imagecolorallocate($img,0,0,0);
$c = imagecolorallocate($img,70,70,70);
imageline($img,0,0,300,600,$c2);
imageline($img,300,0,0,600,$c2);
$white = imagecolorallocate($img, 255, 255, 255);
imagettftext($img, 9, 0, 1, 1, $white, "arial.ttf", $html_code);
// Display the image
header("Content-type: image/jpeg");
imagejpeg($img);
but it doesn't "compile" the html tags and prints them in the image as text.
Best Regards
the GD lib does not have the ablilty to render html-code and draw it on the image. if you want to draw bold text you need to use bold font, e.g. arialbd.ttf
Short answer is that you can't render HTML without a browser.
A longer answer is that you can render HTML in a browser but you can't easily automate capture of a screenshot (there are activeX widgets to do this - but activeX is such a bad idea). A better approach is to use a HTML client which can render to a suitable format - e.g. xhtml2pdf, there are also online services available for this
Related
I am using the following to write a text over an image using the GD Library:
header('Content-type: image/jpeg');
$jpg_image = imagecreatefromjpeg('myImage.jpg');
$black = imagecolorallocate($jpg_image, 0, 0, 0);
$font_path = 'myFont.ttc';
imagettftext($jpg_image, 20, 270, 712, 12, $black, $font_path, $text);
imagejpeg($jpg_image);
imagedestroy($jpg_image);
Now even though the function "imagettftext" clearly states it's a font of type "TTF", I am still able to use a font collection with the "TTC" extension as seen above and that will pick the first font in the collection by default. The only problem is that I cannot specify the index of the font style. As you know "TTC" is a collection of fonts under one file, like "Arial" can have "Regular", "Bold", "Italic", etc...
So I would like a way to also assign the index to choose the font style variant or style within the TTC file. Is there a way to do that with GD?
I would love this process to be automated (I don't want to convert my fonts online from TTC to individual TTF files because this will occur more than often and I would like to tool to be able to handle that). However, if the above is not possible, is there any library or function which I can use that breaks the TTC font to a collection of TTF fonts? This should do the job too.
Many thanks in advance.
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 a Facebook app with which I'd like to display an image in a user's feed. It's just a small circle, which will be different colours depending on what the user does within my app.
Instead of creating lots of different images to display, one for each possible colour the circle could be, it would be ideal if I could put up a PNG with transparency, and then just change the colour by filling a DIV behind the image with Javascript.
However, it's not clear to me if Facebook will allow that in the feed.
Can include some Javascript in the feed, or is that strictly forbidden?
Or is my only option to have a library of images for all the different colours and have a PHP function which selects the right one to output?
Facebook doesn't allow any scriptable content within feed stories, and this isn't possible to implement what you want this way.
You can easily create simple script that will return colored image according to passed arguments and use it as source for the image.
Something like this may provide you some points:
<?
// create a 200*200 image
$img = imagecreatetruecolor(200, 200);
// get the color from URL arguments or use default one
$rgb = isset($_REQUEST['color']) ? $_REQUEST['color'] : 'FFEEDD';
$color = array(
base_convert(substr($rgb, 0, 2), 16, 10),
base_convert(substr($rgb, 2, 2), 16, 10),
base_convert(substr($rgb, 4, 2), 16, 10),
);
// allocate some colors
$white = imagecolorallocate($img, 255, 255, 255);
$red = imagecolorallocate($img, $color[0], $color[1], $color[2]);
// draw the head
imagefilledarc($img, 100, 100, 200, 200, 0, 360, $red, IMG_ARC_PIE);
// output image in the browser
header("Content-type: image/png");
imagepng($img);
// free memory
imagedestroy($img);
No, facebook doesn't allow embedding JavaScript in feeds for security reasons. Even if you manage to do it, it won't work because certain characters such as <, >, etc will be converted into html entities which means the JavaScript won't work.
I have a website I am building that takes data (the person's name) from a form and posts it into a customized "note" in a table on the next page. I want the user to then be able to save their "note" as an image with their customized name on it. Is there a way to save a SPECIFIC HTML TABLE as a PNG? Maybe take a screenshot of a specific coordinate on a web page?
If not is there a way to render posted PHP content from the form in an HTML canvas?
Any help would be great. I'm in a little over my head right now.
While you can render HTML using a variety of tools, you can't be sure that those tools will render the HTML the same way your browser renders it.
If your end goal is to generate an image with text on it, then let's solve that problem instead of trying to make the solution you suggested work.
Have a look at PHP's imagettftext() function. It contains an Example #1 which creates a small, simple image from text that can be stored in any variable ... including a form variable.
By using this example, and adding a few other of PHP's GD functions, you can make a decent replica of a table, and make sure it looks exactly the way you want it, rather than the way html2ps or some other tool renders it.
<?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 = isset($_POST['name']) ? $_POST['name'] : "name";
// Replace path by your own font path
$font = 'arial.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);
?>
Here's sample output generated by the above script:
Note that you'll need to provide arial.ttf per the instructions at the link above.
If things don't work, look for errors both on-screen and in your web server's error log FIRST, before following up here. It's possible that PHP's GD module is not installed on your web server. If this is the case, you should check with your server administrator to make sure what you need is available to you.
You can try this JS library on client side.
workable solution
use fpdf to create pdf from html (table)
use imagemagick to convert pdf to png
You can also use Xvfb. It's a linux package. It stands for "X-window Virtual Frame Buffer" (if you were wondering why on earth it had such an esoteric name).
What that will do, is load a page, execute any JavaScript and apply the different stylings from CSS, all in the frame-buffer of the server. Then you can save the image.
Xvfb will probably not be available on most shared-hosting services, however, if that doesn't matter, then it would be a viable solution.
You can use something like html2ps
Using PHP: How can I create an image to display an email address (to help reduce spam)?
Meaning, if I want to display "joe#example.com" on my web page, since crawlers can easily find that text - I want to display the email address as an image that says "joe#example.com".
How do I do that? I want the font to be:
color: #20c
font: 11px normal tahoma
A simple search that you could easily do....
However: (color, font and string not the ones you specified)
header("Content-type: image/png");
$im = #imagecreate(110, 20)
or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5, "A Simple Text String", $text_color);
imagepng($im);
imagedestroy($im);
Relevant function definitions:
php.net/imagecreate
php.net/imagestring
Use these:
header, to tell the browser to expect an image instead of HTML (PHP's default). The image function doc pages have more information about this.
imagettfbbox, to find out the required size for the image
imagecreatetruecolor, to create the image resource
imagecolorallocate, to allocate a color for the text
imagettftext, to draw the text (read the example, it's almost all you need)
imagepng, to output the image to the browser
You should use gd image processing library.
If you are only doing this for one address you should not be doing this dynamically everytime the page loads for performance reasons. If this is the case you can find amny email obfuscator online such as this one:
http://digitalcolony.com/lab/maskemail/maskemail.aspx