Extract image dimensions (height, width) from Base64 String?

Neo Geshel

Greetings.

I have managed to stitch together an awesome method of posting text
along with an image to a database, in a way that allows an unlimited
number of previews to ensure that text and image are perfect before
submission. This involves converting any uploaded image to a Base64
String and holding that in a hidden form field until either the post
gets submitted to the database or the image gets replaced with another one.

I have just one question. It is really easy to determine the image’s
dimensions during the initial “preview� (before it is converted to
Base64), but the data naturally gets lost on subsequent previews if the
only thing getting passed along is the Base64 string containing the
image data.

I was wondering if there was some way I could parse the Base64 String to
determine the dimensions of the image, or do I have to take the much
more messy way of including hidden form fields to hold the values?

TIA
...Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #1

Stephany Young

You need to 'unbundle' your Base64 encoded string and then get the required
property information from the resultant Image object.
"Neo Geshel" <go****@geshel.org> wrote in message
news:50VJf.42395$H%4.32969@pd7tw2no...
Greetings.

I have managed to stitch together an awesome method of posting text
along with an image to a database, in a way that allows an unlimited
number of previews to ensure that text and image are perfect before
submission. This involves converting any uploaded image to a Base64
String and holding that in a hidden form field until either the post
gets submitted to the database or the image gets replaced with another one.

I have just one question. It is really easy to determine the image’s
dimensions during the initial “preview� (before it is converted to
Base64), but the data naturally gets lost on subsequent previews if the
only thing getting passed along is the Base64 string containing the
image data.

I was wondering if there was some way I could parse the Base64 String to
determine the dimensions of the image, or do I have to take the much
more messy way of including hidden form fields to hold the values?

TIA
....Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #2

Neo Geshel

Stephany Young wrote:

You need to 'unbundle' your Base64 encoded string and then get the required
property information from the resultant Image object.

I kind of figured as much, but do you have an example (after the
unbundling... I know how to do that) that I could use?

TIA
...Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #3

Stephany Young

I got the impression that you already had that side of things working...

Just intercept the Image object before you pass it to the 'preview'.
"Neo Geshel" <go****@geshel.org> wrote in message
news:x3WJf.42855$H%4.27931@pd7tw2no...
Stephany Young wrote:

You need to 'unbundle' your Base64 encoded string and then get the
required property information from the resultant Image object.

I kind of figured as much, but do you have an example (after the
unbundling... I know how to do that) that I could use?

TIA
....Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #4

Neo Geshel

Stephany Young wrote:

I got the impression that you already had that side of things working...

Just intercept the Image object before you pass it to the 'preview'.

Well, the image, encoded as Base64, is embedded directly into the
preview image. That is, it is as such:

<img src="data:image/gif;base64,[image data encoded in base64]" />

And there is a corresponding hidden input field that contains the image
data, also encoded as base64. That way, the img shows the preview, and
the input carries the previewed image data to the next preview. However,
while I am able to convert the image data *from* Base64, I don’t know
what to do with it from there, in terms of parsing it for the height and
width data.

TIA
...Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #5

Stephany Young

Oh I see ... You're using HTML.

I was under the impression you were using VB.NET.
"Neo Geshel" <go****@geshel.org> wrote in message
news:IXWJf.44546$B94.2438@pd7tw3no...
Stephany Young wrote:

I got the impression that you already had that side of things working...

Just intercept the Image object before you pass it to the 'preview'.

Well, the image, encoded as Base64, is embedded directly into the
preview image. That is, it is as such:

<img src="data:image/gif;base64,[image data encoded in base64]" />

And there is a corresponding hidden input field that contains the image
data, also encoded as base64. That way, the img shows the preview, and
the input carries the previewed image data to the next preview. However,
while I am able to convert the image data *from* Base64, I don’t know
what to do with it from there, in terms of parsing it for the height and
width data.

TIA
....Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #6

Neo Geshel

Stephany Young wrote:

Oh I see ... You're using HTML.

I was under the impression you were using VB.NET.

Okay, smartass. Tell me, then, how does one take an image via a file
upload, provide it to the user in a preview (without using a database
*OR* the server file system) through (potentially) multiple previews,
and then finally input it into a database once the preview is accepted
(and only once it is accepted)?

I am using ASP.NET. VB.NET is used in ASP.NET, no? At least, that is the
impression I have been labouring under for the past year or two.

I take the image that the user uploads via the file upload, convert it
into Base64, and then place it into both the image and a hidden input.
The image is for the preview, the hidden input is so the image (now
encoded as Base64) is carried through multiple previews (as the user
refines the text used in the post). Since the <input type="file"
runat="server" /> is completely unlinked from the viewstate, there has
to be some way of carrying any image that was specified through several
previews, and I use the hidden form field for just this purpose. Once
the text (and the choice of image) is satisfactory to the user, they
submit the post, and both the text and the image ends up in a database.

The only way to provide both text *and* image through multiple potential
previews is to convert the image into Base64, and “shoehorn� it inline
with the HTML itself, as a part of the <img> tag (for preview purposes)
and as the content of a hidden <input> tag (for preservation purposes).

Since the <input type="file" runat="server" /> is completely
unassociated with the viewstate, it can only provide the image for a
single preview. Any subsequent previews (prior to a database submission)
cause the image to be lost because it wasn’t saved anywhere. My method
allows me to bypass that problem by preserving the image in a hidden
form field.

My problem is that I can convert the to Base64 (so it is preserved
through more than one preview). I can unconvert it from Base64. I just
am unsure how to extract height and width information from the resulting
code after it has been converted back.

...Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #7

Stephany Young

So, we are supposed to know what you are using from one line of vanilla HTML
that you supply:

<quote>
<img src="data:image/gif;base64,[image data encoded in base64]" />
</quote>

Yeah right!!!!

You have said yourself that you take an image and convert it into Base64.

Presumably, you convert the Image object into some form of byte array just
before you Base64 encode it, possibly via a MemoryStream object.

If you do the reverse of the above on the Base64 encoded value that you are
passing around, to the point that you have an Image object, you can get the
dimensions of the graphic and do with them what you will.
"Neo Geshel" <go****@geshel.org> wrote in message
news:xqYJf.45259$B94.7746@pd7tw3no...
Stephany Young wrote:

Oh I see ... You're using HTML.

I was under the impression you were using VB.NET.

Okay, smartass. Tell me, then, how does one take an image via a file
upload, provide it to the user in a preview (without using a database
*OR* the server file system) through (potentially) multiple previews,
and then finally input it into a database once the preview is accepted
(and only once it is accepted)?

I am using ASP.NET. VB.NET is used in ASP.NET, no? At least, that is the
impression I have been labouring under for the past year or two.

I take the image that the user uploads via the file upload, convert it
into Base64, and then place it into both the image and a hidden input.
The image is for the preview, the hidden input is so the image (now
encoded as Base64) is carried through multiple previews (as the user
refines the text used in the post). Since the <input type="file"
runat="server" /> is completely unlinked from the viewstate, there has
to be some way of carrying any image that was specified through several
previews, and I use the hidden form field for just this purpose. Once
the text (and the choice of image) is satisfactory to the user, they
submit the post, and both the text and the image ends up in a database.

The only way to provide both text *and* image through multiple potential
previews is to convert the image into Base64, and “shoehorn� it inline
with the HTML itself, as a part of the <img> tag (for preview purposes)
and as the content of a hidden <input> tag (for preservation purposes).

Since the <input type="file" runat="server" /> is completely
unassociated with the viewstate, it can only provide the image for a
single preview. Any subsequent previews (prior to a database submission)
cause the image to be lost because it wasn’t saved anywhere. My method
allows me to bypass that problem by preserving the image in a hidden
form field.

My problem is that I can convert the to Base64 (so it is preserved
through more than one preview). I can unconvert it from Base64. I just
am unsure how to extract height and width information from the resulting
code after it has been converted back.

....Geshel
--
************************************************** *********************
* My reply-to is an automatically monitored spam honeypot. Do not use *
* it unless you want to be blacklisted by SpamCop. Please reply to my *
* first name at my last name dot org. *
************************************************** *********************
“Anyone who believes in Intelligent Design (“creationism�) is just as
ignorant and ill-educated as someone who believes that the world is
flat, that the Sun circles the Earth or that there really is a tooth
fairy. Darwinism has an overwhelming foundation of evidence that can be
tested and reproduced. Intelligent Design, on the other hand, has no
evidence at all; not one single shred of testable proof. As such,
Intelligent Design is Religious Mythology, and has no right whatsoever
to be in our Science classrooms.� - 99.99+% of Scientists
************************************************** *********************
Mignon McLaughlin once said that “A nymphomaniac is a woman [who is] as
obsessed with sex as the average man.� Unfortunately, since true
nymphomaniacs are so rare, this means that it takes an extraordinary
woman to keep up with an ordinary man.
************************************************** *********************

Feb 19 '06 #8