title: Face API Detect Issue with Canvas
body: <p>What I am currently trying to do is use the Face API to detect an image that a user has uploaded. I am trying to follow the documentation and the forums are locked so my best bet would be here. Code is below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;FaceDetect&lt;/title&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://api.face.com/lib/api_client.js"&gt;&lt;/script&gt;
          &lt;!--&lt;script type="text/javascript" src="http://api.face.com/lib/tagger.js"&gt;&lt;/script&gt;--&gt;
          &lt;style type="text/css"&gt;
              .f_attribution {display:none;}
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt; 
          var data = canvas.toDataURL('image/jpeg', 1.0);
          newblob = dataURItoBlob(data);
          var formdata = new FormData();
          formdata.append("&lt;-- Insert Key --&gt;", faceKey);
          formdata.append("&lt;-- Insert Key --&gt;", faceSecret);
          formdata.append("filename","temp.jpg");
          formdata.append("file",newblob);
          $.ajax({
                           url: 'http://api.face.com/faces/detect.json',
                           data: formdata,
                           cache: false,
                           contentType: false,
                           processData: false,
                           dataType:"json",
                           type: 'POST',
                           success: function (data) {
                               handleResult(data.photos[0]);
                           }
           });
          //credit http://stackoverflow.com/a/8782422/52160
          function dataURItoBlob(dataURI, callback) {
                  // convert base64 to raw binary data held in a string
                  // doesn't handle URLEncoded DataURIs
                  var byteString;
                  if (dataURI.split(",")[0].indexOf("base64") &gt;= 0) {
                      byteString = atob(dataURI.split(",")[1]);
                  } else {
                      byteString = unescape(dataURI.split(",")[1]);
                  }
                  // separate out the mime component
                  var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
                  // write the bytes of the string to an ArrayBuffer
                  var ab = new ArrayBuffer(byteString.length);
                  var ia = new Uint8Array(ab);
                  for (var i = 0; i &lt; byteString.length; i++) {
                      ia[i] = byteString.charCodeAt(i);
                  }
                  // write the ArrayBuffer to a blob, and you're done
                  var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
                  var bb = new BlobBuilder();
                  bb.append(ab);
                  return bb.getBlob(mimeString);
          }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;MetroClick FaceDetect&lt;/h1&gt;
          &lt;!--&lt;img id="simage" src="http://images.wikia.com/powerrangers/images/f/fe/ActorJohnCho_John_Shea_55027822.jpg"/&gt;--&gt;
          &lt;canvas id="canvas" width="500" height="500"&gt;&lt;/canvas&gt;
          &lt;input type='file' name='img' size='65' id='uploadimage' /&gt;
          &lt;script type="text/javascript"&gt;
          //&lt;![CDATA[ 
          function draw(ev) {
              console.log(ev);
              var ctx = document.getElementById('canvas').getContext('2d'),
                  img = new Image(),
                  f = document.getElementById("uploadimage").files[0],
                  url = window.URL || window.webkitURL,
                  src = url.createObjectURL(f);
  
              img.src = src;
              img.onload = function() {
                  ctx.drawImage(img, 0, 0);
                  url.revokeObjectURL(src);
              }
          }
  
          document.getElementById("uploadimage").addEventListener("change", draw, false)
          //]]&gt;  
          //FaceClientAPI.init('8b3b9170dc5b8a8a4012b06b492449e5');
          //FaceTagger.load("#simage", { demo_mode:true, click_add_tag: false, resizable: true, facebook: false, fade: true, tags_list: false, add_tag_button: true });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I keep receiving a "canvas" is not defined error in the Chrome console. Not really sure where I am having the issue. </p>
  
  <p>Any help would be great thanks.</p>
  
  <p>Edit - Removed keys</p>