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?
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#
...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>
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.
Copy link to clipboard
Copied
Gregory Nelson wrote:
But it is writing the file.
And this: <img src="images/newimage.jpg">?
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?
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")>
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."
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?
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
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">
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?
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.
Copy link to clipboard
Copied
That is what I was afraid of. Any directions on where I might look?
Copy link to clipboard
Copied
Having a look.
Copy link to clipboard
Copied
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.