title: Converting byte array to jpeg image in javascript
body: <p>I have an asp.net page.</p>
  
  <p>Inside this page I have an img control/element.</p>
  
  <p>I am calling an ashx page on my server.</p>
  
  <p>This ashx page accepts a timestamp from the client and compares it to a timestamp stored on the server.</p>
  
  <p>If the timestamps do not match then I return an image which has been converted to a byte array (in C#).</p>
  
  <p>If the timestamps do not match then I return a string value of "-1".</p>
  
  <p>So, this is a cut-down of my ashx page:</p>
  
  <pre><code>public void ProcessRequest (HttpContext context) {
      context.Response.AddHeader("Access-Control-Allow-Origin", "*");
      try
      {
          string clientTS = context.Request.QueryString["clientTS"];
  
          if (clientTS == serverTS)
          {
              //new version available.  refresh browser
              context.Response.ContentType = "text/json";
              string value = "-1";
              context.Response.Write(value);
          }
          else
          {
              context.Response.ContentType = "image/jpg";
              byte[] data = Shared.GetMobileNextFrame("par1", 0);
              context.Response.BinaryWrite(data);
          }
      }
      catch (Exception ex)
      {
          context.Response.ContentType = "text/json";
          context.Response.Write("ERR");
      }
  }
  </code></pre>
  
  <p>And in my javascript code:</p>
  
  <pre><code>function GetImageStatus() {
      finished = false;
      var val = url + '/Mobile/isNewFrame.ashx?Alias=' + Alias + '&amp;CamIndex=' + camIndex + '&amp;Version=' + version + '&amp;GuidLogOn=' + guidLogOn;
      $.ajax({
          url: val,
          type: 'GET',
          timeout: refreshWaitlimit,
          data: lastTS,
          success: function (response, status, xhr) {
              var ct = xhr.getResponseHeader("content-type");
              if (ct.indexOf('json') &gt; -1) {
                  //no update
              }
              else {
                  try {
                      live1x4.src = 'data:image/bmp;base64,' + encode(response);
                  }
                  catch (err) {
                      alert(err);
                  }
              }
          },
          error: function (jqXHR, textStatus, errorThrown) {
            //handle error
          }
      });
  }
  
  function encode(data) {
      var str = String.fromCharCode.apply(null, data);
      return btoa(str).replace(/.{76}(?=.)/g, '$&amp;\n');
  }
  </code></pre>
  
  <p>But I get an error returned:</p>
  
  <blockquote>
    <p>TypeError:  Function.prototype.apply: Arguments list has wrong type</p>
  </blockquote>
  
  <p>If I just apply:</p>
  
  <pre><code>live1x4.src = 'data:image/bmp;base64,' + btoa(response);
  </code></pre>
  
  <p>instead of:</p>
  
  <pre><code>live1x4.src = 'data:image/bmp;base64,' + encode(response);
  </code></pre>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p>InvalidCharacterError: btoa failed.  the string to be encoded contains
    characters outside of the Latin1 range.</p>
  </blockquote>
  
  <p>I have tried using a canvas control with example code i have found on this site. I do not get an error but I also do not get an image.</p>
  
  <p>I know the image is valid because my old code was point the image.src directly to the ashx handler (and i was not comparing timestamps).</p>
  
  <p>I do not want to encode the byte array to base64 string on the server because that would inflate the download data.</p>
  
  <p>I was wondering if I was using the wrong context.Response.ContentType but I could not see what else I could use.</p>
  
  <p>What am i doing wrong?</p>