PDA

View Full Version : html image -- Had some extra time on my hands



djr33
05-05-2006, 07:10 AM
http://ci-pro.com/misc/phptest/images/table.php
Enjoy.

Try saving that image ;)




And, yes, it takes forever to load.



No real point to this... just... had extra time in a class. Heh.




(more info- using php's gd functions, can use any image as the based... just using that right now.)

Note: works in IE/FF, doesn't seem to in Safari.

Twey
05-05-2006, 10:59 AM
Very clever, as an academic experiment, but it's pretty obvious why that's impractical in a real website :)

djr33
05-05-2006, 04:54 PM
Yeah... basically what I thought.


the only advantage to it is that you can't right click on it and save, so it might confuse someone as to not being able to save it... til they think to do a screencap.
But... yeah.
It IS impossible to save as an image... that's kinda cool.

And, heck, you could actually use this in a text only browsers.... but... you can assume those with them would have slower connections anyway, defeating the point.
I know you use one, Twey... does it work?
(or, perhaps tables are considered graphics anyway)

Anyway... was fun :)


Question... why doesn't it work in safari or IE 5, but does in mozilla/IE6+?
Is there some extra thing that needs to be added to the table?

Twey
05-05-2006, 05:48 PM
Try adding   inside each of the table cells.
I know you use one, Twey... does it work?No, totally blank. Although whether that's to do with the lack of data inside the cells or something else, I don't know.

djr33
05-05-2006, 05:52 PM
Does your text only browser support table cell colors, and, overall, tables as a whole?


As for nbsp, that'll screw up the spacing... it'll make it a space wide/tall instead of one pixel.

I guess I could use css to set the size of a space to 1px... but that seems a bit extreme... not sure if browsers will render it that small.

Twey
05-05-2006, 07:11 PM
Does your text only browser support table cell colors, and, overall, tables as a whole?Yes.
As for nbsp, that'll screw up the spacing... it'll make it a space wide/tall instead of one pixel.Not if you specify the size to be 1px by 1px using CSS.

djr33
05-05-2006, 10:26 PM
Cool that it supports it... not like it's a big deal... but.. heck.. images in a browser without images... fun :p

That css would also avoid needing the width=1 for each td and tr, so that would save transfer time. (I could code that into css by itself, but the nbsp; will solve two with one)

Twey
05-05-2006, 10:32 PM
Cool that it supports it... not like it's a big deal... but.. heck.. images in a browser without images... fun Yees... unfortunately, the smallest cell it can display is one character by one character, so it ends up being a bit of a pixellated image :p

djr33
05-05-2006, 10:43 PM
Haha. I bet :D

The first time I did it, I had forgotten to set cellspacing to 0, so I got a weird perforated look. Kinda cool, really.

Twey
05-05-2006, 10:46 PM
Hehe, nice :p

djr33
05-05-2006, 10:48 PM
hey, twey, what exactly would set a space to be 1x1 px? (the css you referred to)

You can set fonts to pixels, but their height specifically... (Or, I mean... how do you, as I don't know how, heh.)

Twey
05-05-2006, 11:03 PM
td {
height: 1px;
width: 1px;
}I was referring to setting the cells' height, not the font's :)

djr33
05-05-2006, 11:05 PM
Oh. Right. But the content of a cell stretches it.... a single character can't be compressed... it'll make the cell big.
Ideas?

Twey
05-05-2006, 11:09 PM
Not so... the overflow will be clipped.
Especially if you specify overflow:hidden;.

djr33
05-05-2006, 11:32 PM
But... nbsp;... acts like a real character. Wouldn't that apply more to brsp;?

But.... ok... shall try that :)

mburt
08-19-2006, 10:07 PM
Holy crap.. you did have alot of time on your hands. I tried doing that once but gave up because I got so bored :)

DimX
08-19-2006, 10:23 PM
Wow, that's nice :p but, tr shouldn't have the width set to 1px ;) (It didn't affect the "image" anyway)

Twey
08-19-2006, 10:49 PM
For anyone who hasn't already seen it: Toogle (http://www.c6.org/toogle/)

mburt
08-19-2006, 10:50 PM
Okay:

This is my html image (Frontpage 2003 Icon)



<html>
<head>
<style type="text/css">
span {
width:2px;
height:2px;
overflow:hidden
}
</style>
</head>
<body>
<span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(125,120,230)"></span>
<span style="background:rgb(125,120,230)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<br><span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(88,88,181)"></span>
<br><span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(197,196,230)"></span>
<span style="background:rgb(151,149,216)"></span>
<span style="background:rgb(123,121,199)"></span>
<span style="background:rgb(123,121,199)"></span>
<span style="background:rgb(151,149,216)"></span>
<span style="background:rgb(197,196,230)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(88,88,181)"></span>
<br><span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(172,172,221)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(111,107,206)"></span>
<span style="background:rgb(97,91,178)"></span>
<span style="background:rgb(186,184,225)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(88,88,181)"></span>
<br><span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(142,140,209)"></span>
<span style="background:rgb(162,159,242)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(231,231,250)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(104,96,203)"></span>
<span style="background:rgb(85,83,176)"></span>
<span style="background:rgb(146,143,194)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(88,88,181)"></span>
<br><span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(114,113,196)"></span>
<span style="background:rgb(149,147,238)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(129,128,216)"></span>
<span style="background:rgb(94,87,195)"></span>
<span style="background:rgb(79,69,169)"></span>
<span style="background:rgb(97,102,165)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(73,69,149)"></span>
<br><span style="background:rgb(111,107,206)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(108,102,195)"></span>
<span style="background:rgb(143,140,226)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(238,238,251)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(117,108,200)"></span>
<span style="background:rgb(73,61,165)"></span>
<span style="background:rgb(95,91,159)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(73,69,149)"></span>
<br><span style="background:rgb(95,91,159)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(127,122,194)"></span>
<span style="background:rgb(129,128,216)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(151,149,216)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(68,58,152)"></span>
<span style="background:rgb(128,126,179)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(73,69,149)"></span>
<br><span style="background:rgb(111,107,206)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(160,159,223)"></span>
<span style="background:rgb(118,112,203)"></span>
<span style="background:rgb(118,112,203)"></span>
<span style="background:rgb(104,96,203)"></span>
<span style="background:rgb(94,84,195)"></span>
<span style="background:rgb(129,128,208)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(73,61,165)"></span>
<span style="background:rgb(73,61,165)"></span>
<span style="background:rgb(173,172,221)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(73,69,149)"></span>
<br><span style="background:rgb(111,107,206)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(153,152,197)"></span>
<span style="background:rgb(97,91,178)"></span>
<span style="background:rgb(85,83,176)"></span>
<span style="background:rgb(73,61,165)"></span>
<span style="background:rgb(68,58,152)"></span>
<span style="background:rgb(68,58,152)"></span>
<span style="background:rgb(68,58,152)"></span>
<span style="background:rgb(129,126,179)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(73,69,149)"></span>
<br><span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(193,192,234)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(255,255,255)"></span>
<span style="background:rgb(162,169,242)"></span>
<span style="background:rgb(88,88,181)"></span>
<br><span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(133,128,234)"></span>
<span style="background:rgb(125,120,230)"></span>
<span style="background:rgb(125,120,230)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(121,117,220)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(115,111,218)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
<span style="background:rgb(93,92,186)"></span>
</body>
</html>

Twey
08-19-2006, 10:59 PM
Ah.

I think the difference is that djr33 used gd to read in the image and generate the HTML dynamically. ;)

mburt
08-19-2006, 11:00 PM
Really? That sounds like a good idea for an application...

DimX
08-20-2006, 10:01 AM
djr33, you should remove the &nbsp; from the cells and also remove the tr style formatting.
Then the "output" would be like this: http://roboweb.awardspace.com/table.html :p

blm126
08-20-2006, 01:12 PM
Pretty cool, but it still takes for ever to load.

Twey
08-20-2006, 02:10 PM
Being as it takes an entire line of HTML for a single pixel, I'm not surprised :)

ItsMeOnly
08-20-2006, 02:52 PM
here's mine (warning, insanely big):
http://rambo.id.uw.edu.pl/textimg/moon.html
http://rambo.id.uw.edu.pl/textimg/moon1.html
These ones are "gimpified" :)

blm126
08-20-2006, 05:17 PM
My turn (http://www.bradyontheweb.com/demo/image/avatar.html), generated with PHP(file is HTML output). The original was 9kb, and this one is 180kb. So 20x bigger.Now just need to go the other way...

mburt
08-20-2006, 06:27 PM
Yes, 180 for 9kbs. I think it's worth it if you want to protect your images. :)

mburt
08-20-2006, 06:30 PM
Wait a minute.. are you guys doing this by hand?

blm126
08-20-2006, 06:41 PM
No, lol. I'm using PHP.

ItsMeOnly
08-20-2006, 07:10 PM
No, lol. I'm using PHP.
GIMP for me...

Twey
08-20-2006, 07:25 PM
Yes, 180 for 9kbs. I think it's worth it if you want to protect your images."Screenshots" :)

Even if it weren't for that, a 20x size increase is not worth it. blm126's image is very small (filesize-wise). A decent-sized image would take a very long time to download, as shown by ItsMeOnly's moon image.

DimX
08-20-2006, 07:57 PM
Me too :p
http://roboweb.awardspace.com/test.php

Btw. optional GET attributes:
- pixelsize (1 | 2 | 3 | ...) (for zooming)
- invert (0 | 1) (invert colors)
- src (uri) (yes, url to custom image, more time to load)

mburt
08-20-2006, 08:05 PM
How are you doing that with PHP?

DimX
08-20-2006, 08:11 PM
Using GD library ;)

mburt
08-20-2006, 08:13 PM
Do wha..? :)

blm126
08-20-2006, 08:27 PM
Check the manual here (http://us2.php.net/manual/en/function.imagecolorat.php). There are several versions in the comments. My code is a modified version of one of them.

djr33
08-21-2006, 08:22 AM
Ha, glad to see you guys are enjoying this.
I've been busy.
Hm... yeah, there are a couple improvements I could make. I was just playing anyway.

I'm thinking it takes a long time to process then load. If you save the html output as html and put that in a file, then load that, it'll be a lot faster than processing the image each time. Maybe that's what you could do if you want it to go a bit faster.

blm126
08-21-2006, 12:18 PM
I'm thinking it takes a long time to process then load. If you save the html output as html and put that in a file, then load that, it'll be a lot faster than processing the image each time. Maybe that's what you could do if you want it to go a bit faster.
That's how I did my demo :)

djr33
08-21-2006, 10:27 PM
Right. That's why I thought that made sense.