title: jsPDF Corrupt PDFs?
body: <p>I am trying to create a PDF file with JavaScript using <strong>jsPDF</strong>. I have a little test page. Basically I have a download PDF button that takes the base64 image from a span and uses that for the <code>imgData</code>. I then try to <code>addImage</code> that image data to the pdf and then save it. Everything seems to work, it generates the PDF and prompts for download. However when I try to look at the PDF with xpdf or Foxit reader I am told the PDF is corrupted. <strong>Am I creating this PDF incorrectly?</strong> My web page is pretty long, so I put it on <a href="http://pastebin.com/uzyNLybM" rel="nofollow">Pastebin</a>.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;   
  &lt;script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../jspdf.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../libs/FileSaver.js/FileSaver.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../libs/BlobBuilder.js/BlobBuilder.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../jspdf.plugin.addimage.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../jspdf.plugin.from_html.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/basic.js"&gt;&lt;/script&gt;
  &lt;title&gt;Sup!&lt;/title&gt;
  &lt;script&gt;
  function changeCan() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,128,128);
  }
  function changeCan3() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle="#FFFFFF";
    ctx.fillRect(0,0,128,128);
    var image = new Image();
    image.src = document.getElementById("3span").innerHTML;
    ctx.drawImage(image,0,0);
  }
  function changeCan4() {
    var imgData = document.getElementById("3span").innerHTML;
    window.alert(imgData.length);
    var doc = new jsPDF();
    doc.addImage(imgData, 'JPEG', 15, 40, 128, 128);
    doc.save('Test.pdf');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    Yo!&lt;hr&gt;
    &lt;canvas id="myCanvas" width="128" height="128"&gt;&lt;/canvas&gt;&lt;hr&gt;
    &lt;button type="button" onClick="changeCan()"&gt;Change Me To Red!&lt;/button&gt;
    &lt;button type="button" onClick="changeCan3()"&gt;Change Me To Span!&lt;/button&gt;
    &lt;button type="button" onClick="changeCan4()"&gt;Download Me!&lt;/button&gt;
    &lt;hr&gt;
    &lt;span id="3span" style="display:none;"&gt;B64 DATA HERE&lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>