Jpeg to HTML

[Skeleton Man]

Hi guys,

I was thinking.. wouldn't it be cool if you could take an image (jpeg) and
redraw the entire thing in HTML ? In theory you could parse the image to
create an array containing the RGB value for every pixel and then print this
out as a series of 1 pixel wide DIV's with the background color set to the
pixel colour.

I realise this would result in a massive document (likely several mb) with
millions of layers, but has anyone ever tried something like this ? I know
you can get programs to convert jpeg to ascii art, so I can't be too far off
in my thinking..

Regards,
Chris

[ZeldorBlat]

On Jun 3, 6:04 pm, "Skeleton Man" <[e-mail]:

Hi guys,

I was thinking.. wouldn't it be cool if you could take an image (jpeg) and
redraw the entire thing in HTML ? In theory you could parse the image to
create an array containing the RGB value for every pixel and then print this
out as a series of 1 pixel wide DIV's with the background color set to the
pixel colour.

I realise this would result in a massive document (likely several mb) with
millions of layers, but has anyone ever tried something like this ? I know
you can get programs to convert jpeg to ascii art, so I can't be too far off
in my thinking..

Regards,
Chris

What would the practical value of such a thing be?

[Andy Hassall]

On Sun, 3 Jun 2007 18:04:03 -0400, "Skeleton Man" <in*****@guestwho.comwrote:

>I was thinking.. wouldn't it be cool if you could take an image (jpeg) and
redraw the entire thing in HTML ? In theory you could parse the image to
create an array containing the RGB value for every pixel and then print this
out as a series of 1 pixel wide DIV's with the background color set to the
pixel colour.

I realise this would result in a massive document (likely several mb) with
millions of layers, but has anyone ever tried something like this ? I know
you can get programs to convert jpeg to ascii art, so I can't be too far off
in my thinking..

Yes, been done before, one of many examples:
http://www.eggheadcafe.com/articles/...l/default.aspx

It's a fairly pointless exercise though.

--
Andy Hassall :: an**@andyh.co.uk :: http://www.andyh.co.uk
http://www.andyhsoftware.co.uk/space :: disk and FTP usage analysis tool

[ZeldorBlat]

On Jun 3, 6:52 pm, Andy Hassall <[e-mail]:

On Sun, 3 Jun 2007 18:04:03 -0400, "Skeleton Man" <[e-mail]:

I was thinking.. wouldn't it be cool if you could take an image (jpeg) and
redraw the entire thing in HTML ? In theory you could parse the image to
create an array containing the RGB value for every pixel and then print this
out as a series of 1 pixel wide DIV's with the background color set to the
pixel colour.

I realise this would result in a massive document (likely several mb) with
millions of layers, but has anyone ever tried something like this ? I know
you can get programs to convert jpeg to ascii art, so I can't be too far off
in my thinking..

Yes, been done before, one of many examples:http://www.eggheadcafe.com/articles/...l/default.aspx

It's a fairly pointless exercise though.

--
Andy Hassall :: [e-mail] ::http://www.andyh.co.ukhttp://www.and....co.uk/space:: disk and FTP usage analysis tool

Pretty pointless and really not that difficult, either:

function imageToHTML($img) {
$width = imagesx($img);
$height = imagesy($img);

for($i = 0; $i < $height; $i++) {
for($j = 0; $j < $width; $j++) {
$color = str_pad(base_convert(imagecolorat($img, $j, $i),
10, 16), 6, '0', STR_PAD_LEFT);
echo '<div style="position: absolute; background-color:
#' . $color . '; height: 1px; width: 1px; top: ' . $i . 'px; left: ' .
$j . 'px;"></div>' . "\n";
}
}
}

[-Lost]

ZeldorBlat wrote:

On Jun 3, 6:52 pm, Andy Hassall <[e-mail]:

>On Sun, 3 Jun 2007 18:04:03 -0400, "Skeleton Man" <[e-mail]:

>>I was thinking.. wouldn't it be cool if you could take an image (jpeg) and
redraw the entire thing in HTML ? In theory you could parse the image to
create an array containing the RGB value for every pixel and then print this
out as a series of 1 pixel wide DIV's with the background color set to the
pixel colour.
I realise this would result in a massive document (likely several mb) with
millions of layers, but has anyone ever tried something like this ? I know
you can get programs to convert jpeg to ascii art, so I can't be too far off
in my thinking..

Yes, been done before, one of many examples:http://www.eggheadcafe.com/articles/...l/default.aspx

It's a fairly pointless exercise though.

--
Andy Hassall :: [e-mail] ::http://www.andyh.co.ukhttp://www.and....co.uk/space:: disk and FTP usage analysis tool

Pretty pointless and really not that difficult, either:

function imageToHTML($img) {
$width = imagesx($img);
$height = imagesy($img);

for($i = 0; $i < $height; $i++) {
for($j = 0; $j < $width; $j++) {
$color = str_pad(base_convert(imagecolorat($img, $j, $i),
10, 16), 6, '0', STR_PAD_LEFT);
echo '<div style="position: absolute; background-color:
#' . $color . '; height: 1px; width: 1px; top: ' . $i . 'px; left: ' .
$j . 'px;"></div>' . "\n";
}
}
}

Would that function be limited to an instance where an image was created
or is it possible to use imagecreatefrompng()?

Granted, I know very little about image-related PHP. I thought I could
plug in a PNG I had (just to get a valid image resource) and I did
nothing, but crash my browser *every* time.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[-Lost]

-Lost wrote:

ZeldorBlat wrote:

>Pretty pointless and really not that difficult, either:

function imageToHTML($img) {
$width = imagesx($img);
$height = imagesy($img);

for($i = 0; $i < $height; $i++) {
for($j = 0; $j < $width; $j++) {
$color = str_pad(base_convert(imagecolorat($img, $j, $i),
10, 16), 6, '0', STR_PAD_LEFT);
echo '<div style="position: absolute; background-color:
#' . $color . '; height: 1px; width: 1px; top: ' . $i . 'px; left: ' .
$j . 'px;"></div>' . "\n";
}
}
}

Would that function be limited to an instance where an image was created
or is it possible to use imagecreatefrompng()?

Granted, I know very little about image-related PHP. I thought I could
plug in a PNG I had (just to get a valid image resource) and I did
nothing, but crash my browser *every* time.

I played with it a bit more and I see now that it merely sent too much
information to the browser. I had a fairly small image (300x30) and it
sent almost 10,000 lines of DIVs to the client-side.

Anyway, now that I see it works. How come it does not display the
images correctly?

If I look close I can see my image amongst a predominantly black square.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[Rami Elomaa]

Skeleton Man kirjoitti:

Hi guys,

I was thinking.. wouldn't it be cool if you could take an image (jpeg) and
redraw the entire thing in HTML ? In theory you could parse the image to
create an array containing the RGB value for every pixel and then print this
out as a series of 1 pixel wide DIV's with the background color set to the
pixel colour.

I realise this would result in a massive document (likely several mb) with
millions of layers, but has anyone ever tried something like this ? I know
you can get programs to convert jpeg to ascii art, so I can't be too far off
in my thinking..

Reminds me of something I did a year ago or so. I made my own version of
the classic mosaic image thingy where smaller images make a bigger
picture. I took a bunch of pictures, clearly I would've needed a whole
lotta more of them, but they did it for the test. I shrunk the images to
very small size, 16x16 to keep it simple, then took an approximation of
the images color and stored them as "colors", as in one image would
represent a particular color. Next I just uploaded a random image,
resized it to 16x16 and took the closest color to each pixels and used
the cloesest matching image to display it. so in the end I had 16x16
grid of images in an html table, which somewhat resembled the original
image. It wasn't perfect, but with lots of more pictures it and a bigger
grid it would've worked... :) But as an experiment it was super cool!

--
Ra*********@gmail.com

"Wikipedia on vähän niinq internetin raamattu, kukaan ei pohjimmiltaan
usko siihen ja kukaan ei tiedä mikä pitää paikkansa." -- z00ze

[Skeleton Man]

Thanks guys.. didn't figure it was an original idea.. and as for pratical
use/value, none whatsoever.. purely entertainment value..

Chris

[Schraalhans Keukenmeester]

At Mon, 04 Jun 2007 19:49:42 -0400, Skeleton Man let h(is|er) monkeys
type:

Thanks guys.. didn't figure it was an original idea.. and as for pratical
use/value, none whatsoever.. purely entertainment value..

Chris

It's a pity these html reprentations don't scale proportionally when
resizing the font in a page. That would have added some value
to the technique.

--
Schraalhans Keukenmeester - sc*********@the.Spamtrapexample.nl
[Remove the lowercase part of Spamtrap to send me a message]

"strcmp('apples','oranges') < 0"