Skip to main content
A
Anonymous
April 16, 2012
Answered

Base64 string to JPG

  • April 16, 2012
  • 1 reply
  • 4113 views

I am hoping someone can help with this. I am trying to take a Base64 string that is passed from a web form and, using ColdFusion (Version 6) conver that to a JPG image that can be posted to the server and a reference stored in a database.

I have the string being passed and it seems to be converting (at least it's creating a jpg file) but when I go to view the file, it's empty. If I view it in Preview on a Mac it says: "It may be damaged or use a file format that Preview doesn’t recognize."

Here is what I am using:

<head>

<cfif isdefined("form.imageName")>

<cfset newJPG = form.imageName>

<cffile action="write" file="#expandPath("images/newimage.jpg")#" variable="newJPG" output="#newJPG#" addnewline="no">

</cfif>

</head>

<body>

<cfoutput>

The string as an output <br /><br />

#newJPG#<br /><br />

The image as written back to a file<br /><br /><img src="#expandPath("images/newimage.jpg")#" /></cfoutput>

</body>

What am I doing wrong?

    This topic has been closed for replies.
    Correct answer BKBK

    There are some subjects to touch upon: tobase64(), toBinary(), and so on. An example will illustrate it best.

    My current directory contains the picture penguins.jpg. I have also created a new directory, image, within the current directory. My suggestion follows:

    <cfif isDefined("form.image_in_base64")>

       

        <cfset base64JPG = form.image_in_base64>

        <cfset binaryJPG = toBinary(base64JPG)>

        <cffile action="write" file="#expandPath("images/newimage.jpg")#" variable="newJPG" output="#binaryJPG#" addnewline="no">

       

        <cfoutput>

        The string as an output <br /><br />

        #base64JPG#<br /><br />

        The image as written back to a file<br /><br /><img src="#expandPath("images/newimage.jpg")#" />

        </cfoutput>

    <cfelse>

        <cffile action="readbinary" file="#expandPath('penguins.jpg')#" variable="binaryImg">

        <cfset base64Img = tobase64(binaryImg)>

        <cfform>

            <cfinput name="image_in_base64" type="text" value="#base64Img#">

            <cfinput name="sbmt" type="submit" value="Send">

        </cfform>

    </cfif>

    1 reply

    BKBK
    BKBKCorrect answer
    Community Expert
    April 16, 2012

    There are some subjects to touch upon: tobase64(), toBinary(), and so on. An example will illustrate it best.

    My current directory contains the picture penguins.jpg. I have also created a new directory, image, within the current directory. My suggestion follows:

    <cfif isDefined("form.image_in_base64")>

       

        <cfset base64JPG = form.image_in_base64>

        <cfset binaryJPG = toBinary(base64JPG)>

        <cffile action="write" file="#expandPath("images/newimage.jpg")#" variable="newJPG" output="#binaryJPG#" addnewline="no">

       

        <cfoutput>

        The string as an output <br /><br />

        #base64JPG#<br /><br />

        The image as written back to a file<br /><br /><img src="#expandPath("images/newimage.jpg")#" />

        </cfoutput>

    <cfelse>

        <cffile action="readbinary" file="#expandPath('penguins.jpg')#" variable="binaryImg">

        <cfset base64Img = tobase64(binaryImg)>

        <cfform>

            <cfinput name="image_in_base64" type="text" value="#base64Img#">

            <cfinput name="sbmt" type="submit" value="Send">

        </cfform>

    </cfif>

    A
    Anonymous
    April 17, 2012

    Thank you! That is what I was missing. The image is still not displaying in the  output:

       <cfoutput>

        The string as an output <br /><br />

        #base64JPG#<br /><br />

        The image as written back to a file<br /><br /><img src="#expandPath("images/newimage.jpg")#" />

        </cfoutput>

    But it is writing the file.

    BKBK
    BKBK
    Community Expert
    April 21, 2012

    Oh right. Just staring at it too long I guess.

    Now I have another string. It's a string from a Canvas element. The canvas grabs a signature. I should be able to convert that the same way correct? First I convert it to a base64 string and then to a jpg. It's writing the file again, but I get the same error saying the file is corrupt. Here is how ai am writing this one:

    The field with the signature string is called "output"

    <!-- Signature Processing -->

    <cfset thisString = "#form.output#">

    <cfif isdefined("form.output")>

    <cfset sig_in_Base64 = toBase64(thisString)>

    <cfset sigbase64JPG = sig_in_base64>

    <cfset binarySigJPG = toBinary(sigbase64JPG)>

    <cffile action="write" file="#expandPath("images/signatures/#form.vin#_Signature.png")#" variable="newSigJPG" output="#binarySigJPG#" addnewline="no" nameconflict="overwrite">

    </cfif>

    Should this work the same way?


    Could it simply be corrected by reversing the typing mistake? That is,

    <cfif isdefined("form.output")>

    <cfset thisString = "#form.output#">

    instead of

    <cfset thisString = "#form.output#">

    <cfif isdefined("form.output")>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices