title: Base64 Image Download: Corrupted File
body: <p>I have a script that converts a canvas element into a base64 encoded image, sets it to the <code>href</code> of a link, and allows users to download it as a jpeg. I</p>
  
  <p>In dev tools, I'm able to open the data URL and view the image just fine and I've verified that the <code>href</code> of the link is updated appropriately. However, the file that is downloaded is not able to be viewed. Attempting to open it in PhotoShop display the following error:</p>
  
  <blockquote>
    <p>Could not complete your request because a JPEG marker segment length
    is too short (the file may be truncated or incomplete).</p>
  </blockquote>
  
  <p>What could cause this? </p>
  
  <p>Here is the function that sets the <code>href</code> value on click:</p>
  
  <pre><code>$(a).click(function() {
              var e = r.toDataURL("image/jpeg");
              console.log(e); //Verify base64 encoded image which works correctly
              a.href = e;
              });
  </code></pre>