title: load an image via ajax into canvas
body: <p>It relates to another question  <a href="https://stackoverflow.com/questions/10690686/cross-origin-resource-sharing-headers-not-working-only-for-safari">Cross Origin Resource Sharing Headers not working only for safari</a> .</p>
  
  <p>I am trying to load an image into canvas from s3.
  Seems <code>safari &lt; 6.0</code> has a bug related to loading images via CORS. So the canvas get tainted though the image has cors enabled. So I was thinking if there is some way to make an ajax request and then load the response into a canvas ?</p>
  
  <p>Note : Ajax request works properly with CORS. Just that while loading image safari doesn't respect the <code>crossOrigin</code> attribute and hence the request is made without cross-origin.</p>
  
  <ul>
  <li>I have my images at s3 so there is no way to encode it to base64 and get it from amazon directly</li>
  <li>I am preferring not to set up a proxy at my domain for the image</li>
  </ul>
  
  <p>some javascript</p>
  
  <pre><code>var img_location = "//temp_upload_test.s3.amazonaws.com/IMG_0222.JPG"
  var img = new Image();
  
  img.onload = function(){
  
      console.log("image loaded")
      EXIF.getData(img,function(){
          console.log("image data read");
          var orientation = EXIF.getTag(img,'Orientation');
          console.log("orientation"+orientation);
          load_image_into_canvas_with_orientation(img,orientation);
      })
      console.log("image loaded function complete");
  }
  img.crossOrigin = "anonymous";
  $(img).attr("crossOrigin","anonymous");
  img.src = img_location;
  </code></pre>
  
  <p>One way I am trying to approach the problem is make an xhr request to s3. get the image as <code>BinaryFile</code> and then decode it to <code>base64</code> and use it as img's <code>src</code> . But while decoding I get a DOM exception not sure if the idea itself is wrong</p>