• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Base64 string to JPG

Guest
Apr 15, 2012 Apr 15, 2012

Copy link to clipboard

Copied

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?

Views

3.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 16, 2012 Apr 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#

...

Votes

Translate

Translate
Community Expert ,
Apr 16, 2012 Apr 16, 2012

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 17, 2012 Apr 17, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2012 Apr 18, 2012

Copy link to clipboard

Copied

Gregory Nelson wrote:

But it is writing the file.

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 21, 2012 Apr 21, 2012

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 21, 2012 Apr 21, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 21, 2012 Apr 21, 2012

Copy link to clipboard

Copied

Hmm. again, you would think I would see that.

It did not fix the problem though. It's doing the same as the other script was at the beginning. It writes a file but trying to open it, it says "It may be damaged or use a file format that Preview doesn’t recognize."

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

It is gathered from an HTML Canvas element in a form (along with some javascript):

<form>

   <div  class="sigPad">

                                       

                                        <ul class="sigNav">

                                            <li class="drawIt"><a href="#draw-it" >Your Signature</a></li>

                                            <li class="clearButton"><a href="#clear">Clear</a></li>

                                        </ul>

                                        <div class="sig sigWrapper">

                                            <div class="typed"></div>

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

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

                                                </div>

                                    </div>             

<input type="submit" value="Submit Form" id="submit"  class="button">

                                        <input type="reset" value="Reset Form" class="button" />

    

</form>

when they submit the form, the value transferred is formatted:

  [{"lx":19,"ly":28,"mx":19,"my":27},{"lx":21,"ly":27,"mx":19,"my":28},{"lx":25,"ly":27,"mx":21,"my":27},{"lx":30,"ly":27, .......

That is the string that I am trying to convert to the jpg (or png). As an answer to the other question, it does not seem to matter png or jpg. This is where I have it now and I am still receiving the same result:

<!-- Signature Processing -->

<cfif isdefined("form.output")>

<cfset thisString = "#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.jpg")#" variable="newSigJPG" output="#binarySigJPG#" addnewline="no" nameconflict="overwrite">

</cfif>

Maybe it is not possible to translate it this way? Am I thinking about it the wrong way?

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

That is what I was afraid of. Any directions on where I might look?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 22, 2012 Apr 22, 2012

Copy link to clipboard

Copied

Having a look.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 23, 2012 Apr 23, 2012

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation