Base64 string to JPG

Report · Apr 15, 2012

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>

</head>

<body>

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?

Report · 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:

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>

</cfform>

</cfif>

Report · Apr 17, 2012

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

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.

Report · Apr 18, 2012

Gregory Nelson wrote:
But it is writing the file.

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

Report · Apr 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"

</cfif>

Should this work the same way?

Report · Apr 21, 2012

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

instead of

Report · Apr 21, 2012

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

Report · Apr 22, 2012

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?

Report · Apr 22, 2012

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

<form>

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

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

</ul>

</div>

</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:

</cfif>

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

Thanks

Report · Apr 22, 2012

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:

Report · Apr 22, 2012

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?

Report · Apr 22, 2012

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.

Report · Apr 22, 2012

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

Report · Apr 22, 2012

Having a look.

Report · Apr 23, 2012

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.

Base64 string to JPG

1 Correct answer