Skip navigation
Gregory Nelson
Currently Being Moderated

Base64 string to JPG

Apr 15, 2012 5:31 PM

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?

 
Replies
  • Currently Being Moderated
    Apr 16, 2012 12:41 AM   in reply to Gregory Nelson

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 12:16 AM   in reply to Gregory Nelson

    Gregory Nelson wrote:

     

    But it is writing the file.

    And this: <img src="images/newimage.jpg">?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2012 12:52 PM   in reply to Gregory Nelson

    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")>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 12:34 AM   in reply to Gregory Nelson

    How does the string form.output begin? Could you show us the first lines of the output? Also, could it be that you intended to write to _Signature.jpg in the cffile rather than to _Signature.png?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 6:56 AM   in reply to Gregory Nelson

    It isn't clear from this code how the canvas gets into the form as a string. The following 2 elements apparently have nothing to do with each other:

     

    <canvas class="pad" width="420" height="55"></canvas>

    <input type="hidden" name="output" class="output">

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 8:05 AM   in reply to Gregory Nelson

    Gregory Nelson wrote:

     

    That's in the Javascript that is writing the JSON representation of the signature to the hidden field named "output." I am then passing that JSON representation to the server to be processed. Does that make sense?

    It does indeed make sense. However, I don't think we can convert from JSON to images as we did above.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 9:43 AM   in reply to Gregory Nelson

    Having a look.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 12:03 AM   in reply to Gregory Nelson

    Nihilogic.dk does Javascript conversions from Canvas to image types. He uses a library consisting of Canvas2Image.js and base64.js. The key function is toDataURL(), which converts a Canvas to the base64 representation of a JPG or PNG file.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points