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

    Base64 string to JPG

    Gregory Nelson Level 1

      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 Adobe Community Professional & MVP

          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 Level 1

            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 Adobe Community Professional & MVP

              Gregory Nelson wrote:

               

              But it is writing the file.

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

              • 4. Re: Base64 string to JPG
                Gregory Nelson Level 1

                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 Adobe Community Professional & MVP

                  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 Level 1

                    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 Adobe Community Professional & MVP

                      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 Level 1

                        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 Adobe Community Professional & MVP

                          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 Level 1

                            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 Adobe Community Professional & MVP

                              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 Level 1

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

                                • 13. Re: Base64 string to JPG
                                  BKBK Adobe Community Professional & MVP

                                  Having a look.

                                  • 14. Re: Base64 string to JPG
                                    BKBK Adobe Community Professional & MVP

                                    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.