Jump to content
johnnyg24

Coverting Base64 To An Image

Recommended Posts

I am looking for a way to take a base64 string that I get from an XML document and covert it to an image. I am trying to integrate UPS Online Tools to generate a Return label from our website. Any help would be appreciated. Thank you.

Share this post


Link to post
Share on other sites

If the string is the image data then you should be able to decode it from base 64 to either binary or hex and then just save the data as a file or send it to the browser.

Share this post


Link to post
Share on other sites

In depends on which language you're using, but you should be able to find several algorithms online to decode base-64 data. There might also be a built-in way to do that, I'm just not familiar enough with the languages of ASP to know.

Share this post


Link to post
Share on other sites

I am also going to post this in the VB Scripting forum.I was able to find a script that looks like it could work. All search inquires for decoding a base64 image is pointing me to this vb function:

Function Base64Decode(ByVal base64String)  Const Base64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"  Dim dataLength, sOut, groupBegin    'remove white spaces, If any  base64String = Replace(base64String, vbCrLf, "")  base64String = Replace(base64String, vbTab, "")  base64String = Replace(base64String, " ", "")    'The source must consists from groups with Len of 4 chars  dataLength = Len(base64String)  If dataLength Mod 4 <> 0 Then	Err.Raise 1, "Base64Decode", "Bad Base64 string."	Exit Function  End If    ' Now decode each group:  For groupBegin = 1 To dataLength Step 4	Dim numDataBytes, CharCounter, thisChar, thisData, nGroup, pOut	' Each data group encodes up To 3 actual bytes.	numDataBytes = 3	nGroup = 0	For CharCounter = 0 To 3	  ' Convert each character into 6 bits of data, And add it To	  ' an integer For temporary storage.  If a character is a '=', there	  ' is one fewer data byte.  (There can only be a maximum of 2 '=' In	  ' the whole string.)	  thisChar = Mid(base64String, groupBegin + CharCounter, 1)	  If thisChar = "=" Then		numDataBytes = numDataBytes - 1		thisData = 0	  Else		thisData = InStr(1, Base64, thisChar, vbBinaryCompare) - 1	  End If	  If thisData = -1 Then		Err.Raise 2, "Base64Decode", "Bad character In Base64 string."		Exit Function	  End If	  nGroup = 64 * nGroup + thisData	Next		'Hex splits the long To 6 groups with 4 bits	nGroup = Hex(nGroup)		'Add leading zeros	nGroup = String(6 - Len(nGroup), "0") & nGroup		'Convert the 3 byte hex integer (6 chars) To 3 characters	pOut = Chr(CByte("&H" & Mid(nGroup, 1, 2))) + _	  Chr(CByte("&H" & Mid(nGroup, 3, 2))) + _	  Chr(CByte("&H" & Mid(nGroup, 5, 2)))		'add numDataBytes characters To out string	sOut = sOut & Left(pOut, numDataBytes)  Next  Base64Decode = sOutEnd Function

I am trying to run this function like this:

Response.Write(Base64Decode(myBase64data))

But all I get is:

GIF87a@ รง

I must be doing something wrong. Can anyone help?

Edited by johnnyg24

Share this post


Link to post
Share on other sites

No that's right, that's what it should be outputting. You're asking it to print the image data as text, and that's what it looks like as text. If you want to display the image you need an ASP script that will set the content type to an image and then output the data. You can't have the ASP script output anything else, the script can either output text data or image data but not both. The content type says what type of data it is. You can use an ASP script as the src for an img tag if you want:<img src="get_image.asp">

Share this post


Link to post
Share on other sites

Could I use

Response.Write("<img src=' " & Base64Decode(myBase64data) & " '/>")

Edit:This works but not in IE6-7,

Response.Write("<img width='744' height='393' src = 'data:image/gif;base64," & myBase64Data & "'/>")

Is there an equivalent to this that will work in IE6-7

Edited by johnnyg24

Share this post


Link to post
Share on other sites

The normal way to do it is like I said, put the ASP script as the source for an image tag and have the ASP script output the content type header and image data, and nothing else.

Share this post


Link to post
Share on other sites

OK,So here is a test that I did. I want to see if this would work with a real image first. Page with the image

<body><img src="base64.asp" /></body>

ASP page with the Function:

<%Function img()Response.Write = "image.gif"Response.ContentType="image/GIF"End Function%><%=img()%>

Nothing happens. Please bear with me, I know almost no asp or vb scripting. I am fairly decent with JavaScript, so maybe (if it's possible) I could use that instead.If someone could show me an example of what it should look like, I can usually figure it out from there.

Share this post


Link to post
Share on other sites

Instead of writing out the filename you need to write out the actual image data. That would be your base64-decoded data. You don't really need to wrap this in a function though if that's the whole script.

<%Response.ContentType="image/GIF"Response.Write (Base64Decode(myBase64data))Response.End()Function Base64Decode(ByVal base64String)  Const Base64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"  Dim dataLength, sOut, groupBegin    'remove white spaces, If any  base64String = Replace(base64String, vbCrLf, "")  base64String = Replace(base64String, vbTab, "")  base64String = Replace(base64String, " ", "")    'The source must consists from groups with Len of 4 chars  dataLength = Len(base64String)  If dataLength Mod 4 <> 0 Then	Err.Raise 1, "Base64Decode", "Bad Base64 string."	Exit Function  End If    ' Now decode each group:  For groupBegin = 1 To dataLength Step 4	Dim numDataBytes, CharCounter, thisChar, thisData, nGroup, pOut	' Each data group encodes up To 3 actual bytes.	numDataBytes = 3	nGroup = 0	For CharCounter = 0 To 3	  ' Convert each character into 6 bits of data, And add it To	  ' an integer For temporary storage.  If a character is a '=', there	  ' is one fewer data byte.  (There can only be a maximum of 2 '=' In	  ' the whole string.)	  thisChar = Mid(base64String, groupBegin + CharCounter, 1)	  If thisChar = "=" Then		numDataBytes = numDataBytes - 1		thisData = 0	  Else		thisData = InStr(1, Base64, thisChar, vbBinaryCompare) - 1	  End If	  If thisData = -1 Then		Err.Raise 2, "Base64Decode", "Bad character In Base64 string."		Exit Function	  End If	  nGroup = 64 * nGroup + thisData	Next		'Hex splits the long To 6 groups with 4 bits	nGroup = Hex(nGroup)		'Add leading zeros	nGroup = String(6 - Len(nGroup), "0") & nGroup		'Convert the 3 byte hex integer (6 chars) To 3 characters	pOut = Chr(CByte("&H" & Mid(nGroup, 1, 2))) + _	  Chr(CByte("&H" & Mid(nGroup, 3, 2))) + _	  Chr(CByte("&H" & Mid(nGroup, 5, 2)))		'add numDataBytes characters To out string	sOut = sOut & Left(pOut, numDataBytes)  Next  Base64Decode = sOutEnd Function%>

That should work as long as you define myBase64data.

Share this post


Link to post
Share on other sites

Here are the pages I have and what they are trying to do:request.asp - has a form that gathers a ship to address. This page has a <!--#include file="response.asp" --> at the top.response.asp - POSTs the ship to address to UPS who returns an encoded shipping label in an XML document.I am defining myBase64data in response.asp as:

Dim myBase64data

I am doing this outside the function that is getting the encoded image data from the XML .I am then setting myBase64data in response.asp as:

Set Response_NodeList = mydoc_acc.documentElement.selectNodes("ShipmentResults/PackageResults/LabelImage")myBase64data = Response_NodeList.Item(0).selectSingleNode("GraphicImage").Text

The image I am trying to display is on the request.asp pageI think I am running into a timing issue where the <img src="base64.asp" /> on the request.asp page is looking for data that is not yet there. Or base64.asp can't read or find myBase64data. I would have thought that by delclaring it outside any functions, that is would be global.

Share this post


Link to post
Share on other sites

It's only going to be global to the one page, something defined inside request.asp isn't automatically going to be defined in base64.asp. One solution is to send it as a parameter and then get it from Request.QueryString. e.g.:<img src="base64.asp?data=<%=Server.URLEncode(myBase64data)%>" />Then on the base64.asp page you would find the data in Request.QueryString("data").

Share this post


Link to post
Share on other sites

I keep trying what your telling me, but I can't get it to work. I know the image data is correct because when I use:

Response.Write("<img width='744' height='393' src = 'data:image/gif;base64," & myBase64Data & "'/>")

everything works out fine. I also know that the image data is being sent to base64.asp because I can see it in Firefox. How is the data being sent? I ask because the encoded image is over 41,000 character long and I know (at least in IE), the max I can send in a URL is 2,048.

Share this post


Link to post
Share on other sites

If it's that long then maybe it's better to store it in the session instead of sending it through the URL. So on the request.asp page you would use e.g. Session("base64_data") = myBase64data, and then on the image page you would get the data from Session("base64_data").

Share this post


Link to post
Share on other sites

It looks like we are getting closer. When I run base64.asp with the Session("base64_data"), somethnig is writing:

<img src="http://www.estout.com/ups/base64.asp" alt="http://www.estout.com/ups/base64.asp"/>

to the body of the page. I am assuming this is happening after it gets decoded. However, there is no image. I have doubled check to make usre the data being stored in Session("base64_data") is correct by trying:

Response.Write("<img width='744' height='393' src = 'data:image/gif;base64," & Session("base64_data") & "'/>")

Could something be happening in the Base64Decode Function? I did not write this function so I am not sure exactly what it is doing.

Share this post


Link to post
Share on other sites

Here's all of it:

<%Response.ContentType="image/GIF"Response.Write (Base64Decode(Session("base64_data")))Function Base64Decode(ByVal base64String)  Const Base64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"  Dim dataLength, sOut, groupBegin    'remove white spaces, If any  base64String = Replace(base64String, vbCrLf, "")  base64String = Replace(base64String, vbTab, "")  base64String = Replace(base64String, " ", "")    'The source must consists from groups with Len of 4 chars  dataLength = Len(base64String)  If dataLength Mod 4 <> 0 Then	Err.Raise 1, "Base64Decode", "Bad Base64 string."	Exit Function  End If    ' Now decode each group:  For groupBegin = 1 To dataLength Step 4	Dim numDataBytes, CharCounter, thisChar, thisData, nGroup, pOut	' Each data group encodes up To 3 actual bytes.	numDataBytes = 3	nGroup = 0	For CharCounter = 0 To 3	  ' Convert each character into 6 bits of data, And add it To	  ' an integer For temporary storage.  If a character is a '=', there	  ' is one fewer data byte.  (There can only be a maximum of 2 '=' In	  ' the whole string.)	  thisChar = Mid(base64String, groupBegin + CharCounter, 1)	  If thisChar = "=" Then		numDataBytes = numDataBytes - 1		thisData = 0	  Else		thisData = InStr(1, Base64, thisChar, vbBinaryCompare) - 1	  End If	  If thisData = -1 Then		Err.Raise 2, "Base64Decode", "Bad character In Base64 string."		Exit Function	  End If	  nGroup = 64 * nGroup + thisData	Next		'Hex splits the long To 6 groups with 4 bits	nGroup = Hex(nGroup)		'Add leading zeros	nGroup = String(6 - Len(nGroup), "0") & nGroup		'Convert the 3 byte hex integer (6 chars) To 3 characters	pOut = Chr(CByte("&H" & Mid(nGroup, 1, 2))) + _	  Chr(CByte("&H" & Mid(nGroup, 3, 2))) + _	  Chr(CByte("&H" & Mid(nGroup, 5, 2)))		'add numDataBytes characters To out string	sOut = sOut & Left(pOut, numDataBytes)  Next  Base64Decode = sOutEnd Function%>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...