|
Convert Images to tables or divs |
|
Page 1 of 2 This tutorial in no way will help your website. There is no point to convert an image to a giant table or thoudands of divs. However, it can be easily done, so why not do it. I have created two scripts, one to output an image pixel by pixel in a table and the other pixel by pixel using divs.
To begin lets take a gander at the code for the table image.
The Table Method:
Below resides the code that will read an image pixel by pixel and spit out a huge amount of html code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
25
27
28
29
30
31
32
| $p=$_GET['img'];
$filename = "upload/upimg/$p";
$imgFile = $filename;
$im = imagecreatefromjpeg($imgFile);
$imgWidth = imagesx($im);
$imgHeight = imagesy($im);
print "\n";
echo '<table cellspacing="0" cellpadding="0"><tr>';
for ($y=0; $y < $imgHeight; $y++)
{
echo '<tr>';
for ($x=0; $x < $imgWidth; $x++)
{
$ndx = imagecolorat($im,$x,$y);
$aryColors = imagecolorsforindex($im,$ndx);
$color= substr("0".dechex($aryColors['red']),-2);
$color.= substr("0".dechex($aryColors['green']),-2);
$color.= substr("0".dechex($aryColors['blue']),-2);
echo '<td bgcolor='.$color.'><img src="/linked_demos/images/space.gif" height="1" width="1"/></td>';
}
print "</tr>";
}
echo '</table>'; |
The break down:
Line number 1 simply pulls in the image request. To use the script you would call it by using img in your link as follows: www.site.com/tablesfromimage.php?img=imagename.jpg
Line 3: The filename is set up as the full path to the file.
Line 7-10: Using GD we create an image from the desired image and get the height and width from this file. The reason we create a new image is to have the ability to pick each pixel's color values.
Line 14: Begin the table--nothing special, just no padding and no spacing or else the image will be giant and pixelated.
Line 15: This loop counts vertically the position on the image. Once it has gone through the number of vertical pixels it knows the image is complete
Line 18: This for loop denotes a row of pixels. While in this for loop you will output and entire row of the image 1 pixel at a time. At the end of the loop the div will close and a new div will begin.
Line 21: This line gets the courrent pixel coordiates. Depending on the position in each for loop x and y will have values that will correspond with the current pixel. That locations color information is then read in the following lines.
Lines 23-25: This reads the RGB hex values of the pixel and sets up a string of hex digits.
A table cell is then output with the background color set to the hex value read from the image. A spacer, 1x1px transparent gif, is needed to make the cells the correct size in IE.
If you wish to try this script I suggest using a small image. It is extrmely slow and a large image will most likely timeout before completion.
|
