remrow Posted April 3, 2008 Share Posted April 3, 2008 Making images from HTML tables. Did you got it ?If you haven't then it is like using no images but using clean HTML tables to make an image.So I turned out to a pretty looking picture from Yahoo Answers Avatar, an avatar of someone that was 48 X 48 resolutions. You guys might be thinking it is too easy; NAH! Think again. It is 2304 cells, which will still wrinkle your fore head and open your mouth.Here is how i did it.http://likeweb.blogspot.com/2008/04/making...html-table.htmlyou guys are welcome to show your works too. Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2008 Share Posted April 3, 2008 All I have is this: http://grandesentrenadores.googlepages.com/object.htmlIt's done without tables, just CSS.I only did it with a really small picture because I don't have interest or patience for it. It took me over two hours. Link to comment Share on other sites More sharing options...
remrow Posted April 3, 2008 Author Share Posted April 3, 2008 yes it is hard and sometimes boring to do it , but when you get the final result you will feel great and relaxed.Yours work is cool too. Do you know how come the cells elongated in the blog, but not in a simple html page?? Link to comment Share on other sites More sharing options...
Ingolme Posted April 3, 2008 Share Posted April 3, 2008 Probably because your "good version" is running un quirks mode while the other one is being run standards compliant.Try applying this CSS to your blog (if you can):...td {width: 10px; /* Choose your width and height for each pixel */height: 10px;}... Link to comment Share on other sites More sharing options...
Synook Posted April 4, 2008 Share Posted April 4, 2008 I only did it with a really small picture because I don't have interest or patience for it. It took me over two hours. MM MMo MMM MMMMMM MMMMM MMMMMMMMM MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM M MMMMMMMMMMMM MMMMMMMMMMMM MMMMMMMMMMMMM MMMMMMMMMMMMMM MMMMMMMMMMMMMMM MMMMMMMMMMMM MMMMMMMMMMMM MMMMMMMMMMM M I see :)Don't you guys have anything better to do? lol Link to comment Share on other sites More sharing options...
boen_robot Posted April 4, 2008 Share Posted April 4, 2008 Hate go break the fun guys, but after pretty much only 5 minutes of playing, I made a PHP script that can convert any (png) image into its XHTML table representation. Observe: <?php$image = 'test.png';$size = getimagesize($image);echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="text/html;charset=utf-8" /><title>Rendering "', $image, '"</title><style type="text/css">table {width:', $size[0],'px;height:', $size[1],'px;table-layout:fixed;} table, table * {margin:0;padding:0;border:none;font-size:0;} td {width:1px;height:1px;}</style></head><body><p>Rendering image at "', $image, '".</p><table>';ob_flush();$start = microtime(true);$im = imagecreatefrompng($image);for ($y=0,$ySize=$size[1]; $y<$ySize; $y++) { echo '<tr>'; for ($x=0,$xSize=$size[0]; $x<$xSize; $x++) { $rgb = imagecolorsforindex($im, imagecolorat($im, $x, $y)); $color = "rgb({$rgb['red']},{$rgb['green']},{$rgb['blue']})"; echo '<td style="background-color:', $color ,';color:', $color,';"> </td>'; } echo '</tr>'; ob_flush();}imagedestroy($im);echo '</table><p>Finished rendering. The table was produced in ', microtime(true) - $start ,' seconds.</p></body></html>';?> (the numerous ob_flush() calls were added for performance's sake when dealing with large images.)It actually works quite well. Now if I could only generate a color map from the start and then use classes (like "c1" for example). I know tidy can do that, but without the ob_flush(), the image generation itself will be just a pain to wait for.Any ideas as to how the color palette may be exported into classes? Link to comment Share on other sites More sharing options...
jeffman Posted April 4, 2008 Share Posted April 4, 2008 boen_robot, I've only recently started dipping into the GD package. I notice you call imagedestroy() right before your script ends. Is this one of those "general principles" kind of things, like closing open files, or is there really a chance the memory won't be released after the script ends? Link to comment Share on other sites More sharing options...
boen_robot Posted April 4, 2008 Share Posted April 4, 2008 boen_robot, I've only recently started dipping into the GD package. I notice you call imagedestroy() right before your script ends. Is this one of those "general principles" kind of things, like closing open files, or is there really a chance the memory won't be released after the script ends?Honestly said, I have no idea. This is the very first time I use the GD library. I have no idea as to whether PHP doesn't free the memory, or if it's implicitly removed. I just consider it a good practice, but I guess it doesn't make a difference, unless you really wanted to do a lot more things, and needed the memory for it. Link to comment Share on other sites More sharing options...
jeffman Posted April 4, 2008 Share Posted April 4, 2008 Yeah, I figured as much. Good for portability too, not to mention examples for the newbs. BTW, I am so far very impressed with GD. I wrote a routine that crops and resamples uploaded images and it works like a charm. Also fast. Link to comment Share on other sites More sharing options...
remrow Posted April 4, 2008 Author Share Posted April 4, 2008 Probably because your "good version" is running un quirks mode while the other one is being run standards compliant.Try applying this CSS to your blog (if you can):...td {width: 10px; /* Choose your width and height for each pixel */height: 10px;} I would use this if i only had to use the same type of table. So using this code is a no no! --------------boen_robot ur code works cool. Thanks for an easy way out!! Link to comment Share on other sites More sharing options...
boen_robot Posted April 4, 2008 Share Posted April 4, 2008 Want to put this script to its limits? Render something classic, yet humongous, like Mona Lisa for example, and you'll see the scale this can take.Note that I've edited the script a little for performance reasons (I tested it against this beast).I was able to complete the rendering. In Opera. With a local copy of the image. By using my own web server on my own PC to which I connect via "localhost". With a maximum execution time adjusted to 1000 seconds. With all other programs turned off to ensure maximum "attention" to the process. After ~2-3 minutes. Link to comment Share on other sites More sharing options...
kv79 Posted April 4, 2008 Share Posted April 4, 2008 -> boen_robot I created a ( .png ) file in photoshop and use your code ,I and get all gray with little dotty . Link to comment Share on other sites More sharing options...
boen_robot Posted April 4, 2008 Share Posted April 4, 2008 -> boen_robot I created a ( .png ) file in photoshop and use your code ,I and get all gray with little dotty .Could you upload the file somewhere? I'd like to reproduce the problem on my computer just to be sure.Also, are you sure you have the GD extension turned on? I haven't included any error handling to fallback in any sort of possible shortcomings (wrong path, unavailability of the extension, etc.) so it will be understandable if the reason is in your configuration. Link to comment Share on other sites More sharing options...
kv79 Posted April 4, 2008 Share Posted April 4, 2008 NO , i do not have GD extension turned on . And I do not know what it is .I never enter the Pearl IDE . But I download GD-Image-Thumbnail-0.02 perl Makefile.PL make make test make install I have some instructions and do not know where to type that .Can this site help me with that http://search.cpan.org/~dmuey/ .? Link to comment Share on other sites More sharing options...
boen_robot Posted April 4, 2008 Share Posted April 4, 2008 NO , i do not have GD extension turned on . And I do not know what it is .I never enter the Pearl IDE . But I download GD-Image-Thumbnail-0.02 perl Makefile.PL make make test make install I have some instructions and do not know where to type that .Can this site help me with that http://search.cpan.org/~dmuey/ .?Errr.... dude, the above is PHP, not Perl.And we're talking about the GD functions of PHP. They are not enabled by default, but they are included. In windows, you just need to uncomment a DLL in php.ini to enable it. If your computer (assuming you run PHP from your computer) is with Linux, there are installation instructions in the manual page linked above that you may try out. Link to comment Share on other sites More sharing options...
kv79 Posted April 4, 2008 Share Posted April 4, 2008 I am run a WIN XP pro SP2 uncomment a DLL , what did you mean by that ,I found in php4 , php.ini and ??? Link to comment Share on other sites More sharing options...
boen_robot Posted April 4, 2008 Share Posted April 4, 2008 I am run a WIN XP pro SP2 uncomment a DLL , what did you mean by that ,I found in php4 , php.ini and ???First stop, upgrade to PHP5! Why stick with PHP4?Now... in PHP5 at least (I'm not sure about PHP4), find the line;extension=php_gd2.dll and replace it with extension=php_gd2.dll (notice the missing ";". That's what it means to uncomment a line in php.ini)And also, search for a line that begins with "extension_dir" and add the path to your PHP folder + ext. For example, if PHP was in "D:\PHP", you'd make this whole line be: extension_dir = "D:\PHP\ext" Restart Apache. You're set. The GD extension should be enabled. To make sure, run <?phpphpinfo();?> and check if there's a header called "GD" with a table below it. If there is, it's all good. Link to comment Share on other sites More sharing options...
kv79 Posted April 4, 2008 Share Posted April 4, 2008 I had installed xampp-win32-1.6.5-installerSo all ready was set up .For php4 , my mistake ,I did not look ....So i Had paint a new and save it in .png extension and I just waiting to finish . Link to comment Share on other sites More sharing options...
kv79 Posted April 4, 2008 Share Posted April 4, 2008 I just finished for 6 seconds . It look nice . In photoshop I used a 640x480 and 72 dpi .It is too big to save it like a web page .Nice program .I mean very nice and useful .It could be used for commercial purpose . Link to comment Share on other sites More sharing options...
jlhaslip Posted April 4, 2008 Share Posted April 4, 2008 Ummm... I'm not sure why someone would want a Table-based Image such as this on a Commercial site, but, whatever.Nice piece of code, Boen Robot. Very concise and clean. Excellent find on the imagecolorsforindex function. Link to comment Share on other sites More sharing options...
remrow Posted April 5, 2008 Author Share Posted April 5, 2008 Nice program .I mean very nice and useful .It could be used for commercial purpose .i would suggest not to use it for any commercial purpose. You see the file size just gets more bigger than the real image by using this method.This is just for fun! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.