So what I have made?
I first choose an image from my picture library. First of all I though to make a huge picture like the 640 X 480 resolutions, but threw that idea after I calculated the no of cells (table cells) needed to make it. 288000 cells are what I would be working if I did that.
So I turned out to a pretty looking picture from Yahoo Answers Avatar, an avatar of someone (he must be very happy) 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.
Then going to the 48 X 48 starting had not yet begun. I opened the picture on Fireworks and magnified it to clearly see its 1 X 1 pixels and fit in the screen. Then I pressed Print Screen button on keyboard and pasted it on a new Fireworks page. I just took out the needed portion and made a jpg image that gave distinct colors on every 8 X 8 pixel with the 384 X 384 resolution.NOTE: If you just enlarge the 48 X 48 image and make a picture then the image is blurred and more colors are added. So don’t do it.
The HTML starts here. I first made a table of 48 X 48 cells on Dreamweaver. The & nbsp from the cells were removed and height and width kept at 8 (px). The table was stretched and widened to 384 (px). The enlarged avatar was made background of the Table, you can see it undoubtedly fits the size of the table. Magnifying the page view made it easier and then just clicked on the first cell, picked the bg color chooser of the cell from the properties menu and click on the cell itself. (Because there is picture on the background, so the color code of the background is chosen for the cell)
This process was repeated until I finished each and every cell. If you are trying it, I suggest you to do it serially.
Then hope fully after 3-5 hours or some days I had some relaxation! But still a small thing was left; I almost forgot to remove the background image of the table. After I removed the image, it was impossible to single out the real image and the HTML table image.
Here is the result:
File size :124.6 kb
Here's a code that will make it faster! It is a php code. Thanks beon_robot.
<?php
$image = 'picture.png';
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, table *
{margin:0;padding:0;border:none;font-size:1px;} td
{width:1px;height:1px;}</style></head><body><p>Rendering image at "', $image,
'".</p><table cellpadding="0" cellspacing="0">';
ob_flush();
$size = getimagesize($image);
$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></body></html>';
?>
Change the bolded part to make some changes with the image you are using.
No comments:
Post a Comment