14 Replies Latest reply: Apr 23, 2012 12:03 AM by BKBK RSS

    Base64 string to JPG

    Gregory Nelson

      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?

        • 1. Re: Base64 string to JPG
          BKBK CommunityMVP

          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>

          • 2. Re: Base64 string to JPG
            Gregory Nelson Community Member

            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.

            • 3. Re: Base64 string to JPG
              BKBK CommunityMVP

              Gregory Nelson wrote:

               

              But it is writing the file.

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

              • 4. Re: Base64 string to JPG
                Gregory Nelson Community Member

                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?

                • 5. Re: Base64 string to JPG
                  BKBK CommunityMVP

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

                  • 6. Re: Base64 string to JPG
                    Gregory Nelson Community Member

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

                    • 7. Re: Base64 string to JPG
                      BKBK CommunityMVP

                      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?

                      • 8. Re: Base64 string to JPG
                        Gregory Nelson Community Member

                        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

                        • 9. Re: Base64 string to JPG
                          BKBK CommunityMVP

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

                          • 10. Re: Base64 string to JPG
                            Gregory Nelson Community Member

                            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?

                            • 11. Re: Base64 string to JPG
                              BKBK CommunityMVP

                              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.

                              • 12. Re: Base64 string to JPG
                                Gregory Nelson Community Member

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

                                • 13. Re: Base64 string to JPG
                                  BKBK CommunityMVP

                                  Having a look.

                                  • 14. Re: Base64 string to JPG
                                    BKBK CommunityMVP

                                    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.