PDA

View Full Version : Image to HTML Script

Slynderdale
06-30-2003, 06:27 AM
Heres a small script I made for a freind that converts an image to html text. What I mean by this, is it reads the image and then outputs a exact dulplicate using just html code.

Theres no fancy gui to it at the moment. Heres how it works:
http://yourdomain/img2html.php?file=test.jpg

It has support for Gif, Jpegs and Png's if your server supports them.

Also it has options to set the maxium width and height of the image and also the filesize.

You also need GD compiled with php for this to work.

I have no online examples of the script at the moment, so instead I'll post a image and its output below.

I also like to note, currently the output is twice as big as the original image. This is because of a bug I found in css. It wont let me set the width of the <TD> tags to 1 pixel. If any one finds a fix, please post it.

Edit:
Added transparency support to the output html.
Slynderdale
06-30-2003, 06:32 AM
Heres an example image I used to make the output.
Slynderdale
06-30-2003, 06:34 AM
Heres an example of the html output using the example image.

To see how it looks, copy and paste the below html code into a html file.


<html>
<head>
<title>Image 2 HTML Converter by Slynderdale</title>
<style type="text/css">
<!--
td {
height: 2px;
width: 0px;
}
table {
border: 0px;
cell-padding: 0px;
cell-spacing: 0px;
border-width: 0px;
border-height: 0px;
border-collapse: collapse;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#C2CAF2></td>
<td bgcolor=#C2CAF2></td>
<td bgcolor=#C2CAF2></td>
<td bgcolor=#C1C9F1></td>
<td bgcolor=#BEC6EF></td>
<td bgcolor=#BAC2EC></td>
<td bgcolor=#B5BEE9></td>
<td bgcolor=#B2BBE6></td>
<td bgcolor=#AEB8E4></td>
<td bgcolor=#919CCE></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#C2CAF2></td>
<td bgcolor=#F7F7FF></td>
<td bgcolor=#F5F5FF></td>
<td bgcolor=#F4F4FF></td>
<td bgcolor=#F3F3FF></td>
<td bgcolor=#F2F2FF></td>
<td bgcolor=#F1F1FF></td>
<td bgcolor=#EFEFFF></td>
<td bgcolor=#A8B2DF></td>
<td bgcolor=#E4E4FF></td>
<td bgcolor=#919CCE></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#BEC6EF></td>
<td bgcolor=#F3F3FF></td>
<td bgcolor=#F1F1FF></td>
<td bgcolor=#F0F0FF></td>
<td bgcolor=#EFEFFF></td>
<td bgcolor=#EEEEFF></td>
<td bgcolor=#EDEDFF></td>
<td bgcolor=#EBEBFF></td>
<td bgcolor=#A1ABDA></td>
<td bgcolor=#DBDBFF></td>
<td bgcolor=#DBDBFF></td>
<td bgcolor=#919CCE></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#B6BFEA></td>
<td bgcolor=#EBECFD></td>
<td bgcolor=#D2D5EF></td>
<td bgcolor=#B7BCDE></td>
<td bgcolor=#ACB3D9></td>
<td bgcolor=#99A1CC></td>
<td bgcolor=#99A1CD></td>
<td bgcolor=#ACB3D9></td>
<td bgcolor=#8C96CC></td>
<td bgcolor=#929DCF></td>
<td bgcolor=#919CCE></td>
<td bgcolor=#8D98CB></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#939ED0></td>
<td bgcolor=#8A94C7></td>
<td bgcolor=#6775B2></td>
<td bgcolor=#6473B2></td>
<td bgcolor=#32312E></td>
<td bgcolor=#8C91A8></td>
<td bgcolor=#6473B2></td>
<td bgcolor=#5664A4></td>
<td bgcolor=#6875B2></td>
<td bgcolor=#818CC3></td>
<td bgcolor=#A6ADDA></td>
<td bgcolor=#8590C5></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#B1B8D5></td>
<td bgcolor=#545459></td>
<td bgcolor=#32312E></td>
<td bgcolor=#71768A></td>
<td bgcolor=#8994BF></td>
<td bgcolor=#32312E></td>
<td bgcolor=#32312E></td>
<td bgcolor=#777C91></td>
<td bgcolor=#8D97BF></td>
<td bgcolor=#545459></td>
<td bgcolor=#32312E></td>
<td bgcolor=#71768A></td>
<td bgcolor=#7682B6></td>
<td bgcolor=#666772></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#C2C8E8></td>
<td bgcolor=#7C86B4></td>
<td bgcolor=#32312E></td>
<td bgcolor=#85868F></td>
<td bgcolor=#32312E></td>
<td bgcolor=#B2B8D4></td>
<td bgcolor=#32312E></td>
<td bgcolor=#858891></td>
<td bgcolor=#32312E></td>
<td bgcolor=#B2B8D4></td>
<td bgcolor=#32312E></td>
<td bgcolor=#8C8E98></td>
<td bgcolor=#32312E></td>
<td bgcolor=#6A6F86></td>
<td bgcolor=#646B93></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#909AC5></td>
<td bgcolor=#7C84A9></td>
<td bgcolor=#3A3A38></td>
<td bgcolor=#B2B8D4></td>
<td bgcolor=#32312E></td>
<td bgcolor=#B2B8D4></td>
<td bgcolor=#32312E></td>
<td bgcolor=#9DA5C7></td>
<td bgcolor=#32312E></td>
<td bgcolor=#B2B8D4></td>
<td bgcolor=#32312E></td>
<td bgcolor=#B3B9D6></td>
<td bgcolor=#32312E></td>
<td bgcolor=#6A7087></td>
<td bgcolor=#606CA2></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#CED2E6></td>
<td bgcolor=#737A96></td>
<td bgcolor=#33312D></td>
<td bgcolor=#32312E></td>
<td bgcolor=#535358></td>
<td bgcolor=#9DA5C7></td>
<td bgcolor=#32312E></td>
<td bgcolor=#A6ADC7></td>
<td bgcolor=#32312E></td>
<td bgcolor=#9DA5C7></td>
<td bgcolor=#32312E></td>
<td bgcolor=#32312E></td>
<td bgcolor=#545459></td>
<td bgcolor=#7A85B5></td>
<td bgcolor=#5F6789></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#A1A1A7></td>
<td bgcolor=#32312E></td>
<td bgcolor=#828CB7></td>
<td bgcolor=#7682B7></td>
<td bgcolor=#7681B3></td>
<td bgcolor=#7A84B3></td>
<td bgcolor=#737FB2></td>
<td bgcolor=#949DC6></td>
<td bgcolor=#737FB2></td>
<td bgcolor=#32312E></td>
<td bgcolor=#7E88B5></td>
<td bgcolor=#7480B6></td>
<td bgcolor=#5D6BA9></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#9EA5C9></td>
<td bgcolor=#8C96CC></td>
<td bgcolor=#6A76B2></td>
<td bgcolor=#5F6CAA></td>
<td bgcolor=#5665A4></td>
<td bgcolor=#5563A3></td>
<td bgcolor=#6270AD></td>
<td bgcolor=#9399B7></td>
<td bgcolor=#868FB9></td>
<td bgcolor=#818AC6></td>
<td bgcolor=#A9ADE4></td>
<td bgcolor=#5D6BA8></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#7E8ABF></td>
<td bgcolor=#CFCFFF></td>
<td bgcolor=#CFCFFF></td>
<td bgcolor=#CFCFFF></td>
<td bgcolor=#CFCFFF></td>
<td bgcolor=#CECEFF></td>
<td bgcolor=#CDCDFF></td>
<td bgcolor=#CCCCFF></td>
<td bgcolor=#CBCBFF></td>
<td bgcolor=#CACAFF></td>
<td bgcolor=#C9C9FF></td>
<td bgcolor=#5967A2></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#7582BA></td>
<td bgcolor=#CFCFFF></td>
<td bgcolor=#CDCDFF></td>
<td bgcolor=#CCCCFF></td>
<td bgcolor=#CCCCFF></td>
<td bgcolor=#CBCBFF></td>
<td bgcolor=#CACAFF></td>
<td bgcolor=#C8C8FF></td>
<td bgcolor=#C7C7FF></td>
<td bgcolor=#C6C6FF></td>
<td bgcolor=#C5C5FF></td>
<td bgcolor=#57649E></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#6F7CB5></td>
<td bgcolor=#CCCCFF></td>
<td bgcolor=#CACAFF></td>
<td bgcolor=#C9C9FF></td>
<td bgcolor=#C8C8FF></td>
<td bgcolor=#C7C7FF></td>
<td bgcolor=#C6C6FF></td>
<td bgcolor=#C4C4FF></td>
<td bgcolor=#C3C3FF></td>
<td bgcolor=#C2C2FF></td>
<td bgcolor=#C1C1FF></td>
<td bgcolor=#56629B></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#6875B0></td>
<td bgcolor=#6370AD></td>
<td bgcolor=#606EAA></td>
<td bgcolor=#5D6BA8></td>
<td bgcolor=#5B69A6></td>
<td bgcolor=#5967A3></td>
<td bgcolor=#5866A1></td>
<td bgcolor=#5865A0></td>
<td bgcolor=#57649E></td>
<td bgcolor=#56639C></td>
<td bgcolor=#55619A></td>
<td bgcolor=#546098></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<tr>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#FFFFFF></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#676770></td>
<td bgcolor=#FFFFFF></td>
</tr>
<table>
</body>
</html>
Dean C
06-30-2003, 10:42 AM
omg this is absolutely amazing lol!
SZ|TalonKarrde
06-30-2003, 10:45 AM
Hmm... GD1.x and 2.x compatible, or just 1, or just 2?
filburt1
06-30-2003, 12:51 PM
It's nice, but...useful? :confused:
Slynderdale
06-30-2003, 07:00 PM
Today at 07:45 AM SZ|TalonKarrde said this in Post #5 (https://vborg.vbsupport.ru/showthread.php?postid=414144#post414144)
Hmm... GD1.x and 2.x compatible, or just 1, or just 2?

Its compatible with both, also with GD 2, yo can get gif support for it as well.
Slynderdale
06-30-2003, 07:25 PM
Added a update to the script, it now checks to see of the pizel is transparent, if it is, it doesnt show it in the html output now.
Zate
07-02-2003, 07:48 PM
thats pretty cool.. hehe..

cept it turned my 10K jpg into a 123K html file..hehe..

not sure what you'd use this for.. but its pretty cool :)