title: Adding multiple ITextSharp binary images using byte array causes IndexOutOfRangeException
body: <p>I am using <strong>ITextSharp</strong> and <strong>html2canvas</strong> for <strong>adding binary images</strong> and <strong>PDF generation</strong>.</p>
  
  <p>Below is a snippet of my <code>Codebehind</code> code.</p>
  
  <pre><code>var overallResultsBase64string = hdnOverallResults.Value.Replace("data:image/png;base64,", "");
  var appServerCapacityBase64string = hdnAppServerCapacity.Value.Replace("data:image/png;base64,", "");
  var appPerformanceBase64string = hdnAppPerformance.Value.Replace("data:image/png;base64,", "");
  var dbServerCapacityBase64string = hdnDBServerCapacity.Value.Replace("data:image/png;base64,", "");
  var dbPerformanceBase64string = hdnDBPerformance.Value.Replace("data:image/png;base64,", "");
  
  iTextSharp.text.Image overallResultsImg, appServerCapacityImg, appPerformanceImg
    , dbServerCapacityImg, dbPerformanceImg;
  
  byte[] overallResultsBytes = Convert.FromBase64String(overallResultsBase64string);
  overallResultsImg = iTextSharp.text.Image.GetInstance(overallResultsBytes);
  byte[] appServerCapacityBytes = Convert.FromBase64String(appServerCapacityBase64string);
  appServerCapacityImg = iTextSharp.text.Image.GetInstance(appServerCapacityBytes);
  byte[] appPerformanceBytes = Convert.FromBase64String(appPerformanceBase64string);
  appPerformanceImg = iTextSharp.text.Image.GetInstance(appPerformanceBytes);
  byte[] dbServerCapacityBytes = Convert.FromBase64String(dbServerCapacityBase64string);
  dbServerCapacityImg = iTextSharp.text.Image.GetInstance(dbServerCapacityBytes);
  byte[] dbPerformanceBytes = Convert.FromBase64String(dbPerformanceBase64string);
  dbPerformanceImg = iTextSharp.text.Image.GetInstance(dbPerformanceBytes);
  
  document.Add(overallResultsImg);
  document.Add(new Paragraph("OVERALL APPLICATION PERFORMANCE"));
  document.Add(appPerformanceImg);
  document.Add(dbPerformanceImg);
  document.Add(new Paragraph("OVERALL SERVER CAPACITY"));
  document.Add(appServerCapacityImg);
  document.Add(dbServerCapacityImg);
  </code></pre>
  
  <p><code>var appServerCapacityBase64string</code> is <code>NULL</code> that it throws an <code>IndexOutOfBounds</code> exception on </p>
  
  <pre><code>byte[] appServerCapacityBytes = Convert.FromBase64String(appServerCapacityBase64string);
  appServerCapacityImg = iTextSharp.text.Image.GetInstance(appServerCapacityBytes);
  </code></pre>
  
  <p>Is there something wrong with my <strong>Javascript html2canvas</strong> code below? Kindly check.</p>
  
  <pre><code>&lt;script&gt;
     html2canvas($("#overallResultsDiv"), {
          onrendered: function (canvas) {
              // canvas is the final rendered &lt;canvas&gt; element
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("hdnOverallResults").value = myImage;
          }
      });
  
      html2canvas($("#appServerCapacityDiv"), {
          onrendered: function (canvas) {
              // canvas is the final rendered &lt;canvas&gt; element
              var myImage = canvas.toDataURL("image/png");
             $("#hdnAppServerCapacity").value = myImage;
          }
      });
  
      html2canvas($("#appPerformanceDiv"), {
          onrendered: function (canvas) {
              // canvas is the final rendered &lt;canvas&gt; element
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("hdnAppPerformance").value = myImage;
          }
      });
  
      html2canvas($("#dbServerCapacityDiv"), {
          onrendered: function (canvas) {
              // canvas is the final rendered &lt;canvas&gt; element
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("hdnDBServerCapacity").value = myImage;
          }
      });
  
      html2canvas($("#dbPerformanceDiv"), {
          onrendered: function (canvas) {
              // canvas is the final rendered &lt;canvas&gt; element
              var myImage = canvas.toDataURL("image/png");
              document.getElementById("hdnDBPerformance").value = myImage;
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>ONLY</strong> the <strong>first html2canvas</strong> <strong>successfully</strong> passes the <code>base64 string</code> to the respective <code>HiddenField</code> as value and is <strong>successfully</strong> accessed in <code>CodeBehind</code>. What is wrong with my script that makes the <code>5 HiddenFields</code> return <strong>NULL</strong>?</p>