Click here to get back home

embedding images in HTML with the data URL src

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
embedding images in HTML with the data URL src Edward 01-28-2006
Posted by Edward on January 28, 2006, 1:26 am
Please log in for more thread options


I have been doing some research about embedding images in HTML using
the data URL src method of the format:

<img src="/-/data:image/gif;base64,<DATA>">

My question is, how does one generate this <DATA> string? I have found
some on the web that I can load into my browser but if I save this
image and then view in Notepad it looks much different than the string
that I used in <DATA> and is full of non-alphanumeric symbols. Also, I
have saved this image as a BLOB into my database and this format is in
turn different from the two other. What gives?

Thanks.

Edward


Posted by Jukka K. Korpela on January 28, 2006, 3:04 am
Please log in for more thread options


Edward wrote:

> I have been doing some research about embedding images in HTML using
> the data URL src method of the format:

Have you studied the specification of data: URLs and the browser support
to them?

> <img src="/-/data:image/gif;base64,<DATA>">

Apparently not. And your markup isn't even valid.

Besides, even if you got it right, and even if browsers generally
supported it (say, in 2009), would it still be _useful_ to use it?

> My question is, how does one generate this <DATA> string?

It's too early to ask that, since you haven't addressed the more
fundamental issues. Besides, it's not an HTML issue.

Posted by Edward on January 28, 2006, 5:52 am
Please log in for more thread options



Jukka K. Korpela wrote:
> Edward wrote:
>
> > I have been doing some research about embedding images in HTML using
> > the data URL src method of the format:
>
> Have you studied the specification of data: URLs and the browser support
> to them?
>

I am trying to learn all I can about the data: URL. Clearly I am not
yet an expert! But I hope to learn from others in this forum and in my
other research. I am trying to progress.

> > <img src="/-/data:image/gif;base64,<DATA>">
>
> Apparently not. And your markup isn't even valid.
>

How so? I have been able to open images in browsers using this markup.
I found some good examples at:
http://delegate.org/delegate/sample/data-url.html.

> Besides, even if you got it right, and even if browsers generally
> supported it (say, in 2009), would it still be _useful_ to use it?
>

I hope so. I am not going to use it in the browser, per se, however.
I plan to use it to pass a parameter to Apache FOP to load an
external-graphic. I need to use a data: URL because the image
generation servlet is required to use HTTPS and FOP does not seem to
support HTTPS in an external-graphic.

> > My question is, how does one generate this <DATA> string?
>
> It's too early to ask that, since you haven't addressed the more
> fundamental issues. Besides, it's not an HTML issue.

I have found a web site to encode data to Base64
(http://makcoder.sourceforge.net/demo/base64.php) and a class that
someone wrote
(http://www.source-code.biz/snippets/java/Base64Coder.java.txt). Using
both of these methods, I took the sample <DATA> from above (which
created the image in a browser) and then saved this image. I then used
the two methods here to try to recreate the <DATA>. The recreated
<DATA> was close but not the same as the original. I think that I must
be missing something obvious on how to create the Base64 data.


Posted by Alexander Clauss on January 28, 2006, 8:54 am
Please log in for more thread options



> How so? I have been able to open images in browsers using this markup.
> I found some good examples at:
> http://delegate.org/delegate/sample/data-url.html.

Forget this page immediately.

The second example of this page (with the "/-/" prepended to the data
url) will result in the following:
The relative URL "/-/data:image/gif;base64,<data>" will be resolved
to "http://delegate.org/-/data:image/gif;base64,<data>" and then will be
send back to the server. The server now translates the "<data>" into a
GIF image and sends this image back to the browser which it can display.


In the first example (the real "data:" URL scheme) will result in the
following:
The URL "data:image/gif;base64,<data>" will be directly translated into
a GIF image by the browser and so can be directly displayed.

The differences is:
The second example needs more than the double amout of data that is send
to and from the server. And it is working only with the help
of the server, and only if the server is able to translate such
URLs. That means there must be a certain script installed on your server
in order to use this special URLs. And because of the doubled data
transmission you'll better use the ordinary way to embed images

It doesn't make any sense to prepend "/-/" to "data:" URLs.

--
Alexander

Posted by Jukka K. Korpela on January 28, 2006, 12:07 pm
Please log in for more thread options



> I am trying to learn all I can about the data: URL.

But you apparently did not even read the description of their format.

>> > <img src="/-/data:image/gif;base64,<DATA>">
>>
>> Apparently not. And your markup isn't even valid.
>
> How so? I have been able to open images in browsers using this markup.

Apparently you don't even know what "valid markup" means.

> I need to use a data: URL because the image
> generation servlet is required to use HTTPS and FOP does not seem to
> support HTTPS in an external-graphic.

Whatever that's supposed to mean, it's not about HTML authoring for the WWW,
hence off-topic for this group.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html


Similar ThreadsPosted
Embedding a Form in an HTML E-Mail - Possible? September 16, 2004, 7:10 am
Embedding a DVD movie to an HTML page March 10, 2005, 9:57 pm
embedding + mouseover September 24, 2004, 12:45 am
embedding media player September 30, 2004, 11:58 am
Embedding a URL as an argument to a CGI program January 14, 2005, 7:57 pm
Embedding external content - impossible? May 10, 2005, 6:45 pm
Legality of embedding YouTube videos? February 1, 2007, 2:31 pm
Embedding a sound file without launching player March 31, 2005, 5:20 am
Converting HTML Form Data into Webpage Output ? January 17, 2005, 1:06 pm
DHTML question: DOM access to December 17, 2004, 6:05 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap