title: Why I get an Exception 18 when I try to get the image data of an Image with Access-Control-Allow-Origin: * in the response header?
body: <p>When I try to get the pixels of an image through the method getImageData, I've got this error </p>
  
  <blockquote>
    <p>"Unable to get image data from canvas because the canvas has been
    tainted by cross-origin data. Uncaught Error: SecurityError: DOM
    Exception 18"</p>
  </blockquote>
  
  <p>The image has <strong>Access-Control-Allow-Origin: *</strong> in the header response. So, I don't understand why I got this error. What I have to do to solve this problem?.</p>
  
  <p>I've tried to add the attribute crossOrigin to the image, but this does not work in Safari.
  The code I am working on is below.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Example&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var img = new Image();
      img.onload = function() {
          var ctx = $('#cnv')[0].getContext('2d');
          ctx.drawImage(this, 0, 0);
          var originalImageData = ctx.getImageData(0, 0, 300, 300); // Exception 18
      };
      img.src = 'http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg';
      $('body').append(img);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Example&lt;/h1&gt;
  &lt;img class="image" id="img-rara" src="http://api.thumbr.it/f4414f15f6d6d2639a17c6e1c025d970/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebarcelona-eframe1/thumb.jpg" /&gt;
  &lt;canvas id="cnv" width="711" height="400" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>