title: jquery.exif.js - Parsing exif data from canvas.toDataURL() - access-control-error
body: <p>Ok here's the scoop:</p>
  
  <p>ASP.NET application.</p>
  
  <p>I am using the plugin - <a href="http://www.nihilogic.dk/labs/exifjquery/jquery.exif.js" rel="nofollow">jquery.exif.js</a></p>
  
  <p>As well as the plugin - <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow">jQuery-File-Upload</a></p>
  
  <p>When I load a file into the jQueryFileUploader I then <em>need</em> to get its exif data prior to sending this file for upload. </p>
  
  <p>The jQueryFileUpload renders the image into a canvas, which I then convert to an image in order to get it's exif data via the plugin:</p>
  
  <pre><code>$('.my-img').live('click', function () {
      var canvas = document.getElementById($(this).attr('id'));
      var img = new Image();
      img.src = canvas.toDataURL();
  
      $(img).exifLoad(function () {
          alert($(img).exifPretty());
      });
  });
  </code></pre>
  
  <p>The image url looks like this: </p>
  
  <p>'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA7CAYAAADsIg00AAAgAElEQVR....'</p>
  
  <p>When the plugin runs this method: </p>
  
  <pre><code>function sendRequest(strURL, fncCallback, fncError, aRange, bAcceptRanges, iFileSize) {
          var oHTTP = createRequest();
          if (oHTTP) {
  
              var iDataOffset = 0;
              if (aRange &amp;&amp; !bAcceptRanges) {
                  iDataOffset = aRange[0];
              }
              var iDataLen = 0;
              if (aRange) {
                  iDataLen = aRange[1] - aRange[0] + 1;
              }
  
              if (fncCallback) {
                  if (typeof (oHTTP.onload) != "undefined") {
                      oHTTP.onload = function () {
  
                          if (oHTTP.status == "200" || oHTTP.status == "206" || oHTTP.status == "0") {
                              this.binaryResponse = new BinaryFile(this.responseText, iDataOffset, iDataLen);
                              this.fileSize = iFileSize || this.getResponseHeader("Content-Length");
                              fncCallback(this);
                          } else {
                              if (fncError) fncError();
                          }
                          oHTTP = null;
                      };
                  } else {
                      oHTTP.onreadystatechange = function () {
                          if (oHTTP.readyState == 4) {
                              if (oHTTP.status == "200" || oHTTP.status == "206" || oHTTP.status == "0") {
                                  this.binaryResponse = new BinaryFile(oHTTP.responseBody, iDataOffset, iDataLen);
                                  this.fileSize = iFileSize || this.getResponseHeader("Content-Length");
                                  fncCallback(this);
                              } else {
                                  if (fncError) fncError();
                              }
                              oHTTP = null;
                          }
                      };
                  }
              }
              oHTTP.open("GET", strURL, true);
  
              if (oHTTP.overrideMimeType) oHTTP.overrideMimeType('text/plain; charset=x-user-defined');
  
              if (aRange &amp;&amp; bAcceptRanges) {
                  oHTTP.setRequestHeader("Range", "bytes=" + aRange[0] + "-" + aRange[1]);
              }
  
              oHTTP.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 1970 00:00:00 GMT");
  
              oHTTP.send(null);
          } else {
              if (fncError) fncError();
          }
      }
  </code></pre>
  
  <p>The GET fails with the following error in my console:</p>
  
  <p>'XMLHttpRequest cannot load data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA7CAYAAADsIg00AAAgAElEQ…OqEqrkq7RcS3YLfHz3I+/BUMHzeC0Ir2HtuqJC4jFO9/8Bv2hF1W9nFmYAAAAASUVORK5CYII=. Origin <a href="http://mysite.com" rel="nofollow">http://mysite.com</a> is not allowed by Access-Control-Allow-Origin.'</p>
  
  <p>The network tab of Chrome Dev Tools shows <a href="http://sdrv.ms/Wwh38N" rel="nofollow">this</a> .</p>
  
  <p>I also have this in my Global.asax:</p>
  
  <pre><code>private void EnableCrossDomainAjaxCall()
      {
          HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
  
          if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
          {
              HttpContext.Current.Response.AddHeader("_CACHE-Control", "no-_CACHE");
              HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
              HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
              HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
              HttpContext.Current.Response.End();
          }
      }
  </code></pre>
  
  <p>Generally speaking, that code in the Global.asax has always resolved access-control-origin problems for me. But this time it's something different. </p>
  
  <p>There is always the case I am making this too complex. </p>
  
  <p>Project steps:</p>
  
  <ol>
  <li>user selects image - get exif data</li>
  <li>send image to handler, via form submit, for upload to server with some needed params to do with exif</li>
  </ol>
  
  <p>I appreciate any and all help! Thanks a lot! :)</p>
  
  <p>Dave</p>