title: Javascript CORS image / canvas manipulation
body: <p>I am trying to retrieve an image from another domain which I have configured to allow CORS
  and manipulate pixels and then I want to display the result and be able to manipulate the result. I am able to use both getImageData and toDataURL on the image that I have requested so I know that the server part works. However when i try to change the src attribute of the image to the dataURL from the canvas I get the security error "Cross-origin image load denied by Cross-Origin Resource Sharing policy.".</p>
  
  <pre><code>function manipulateImage(img, func) {
      var canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
  
      c = canvas.getContext('2d');
      c.drawImage(img, 0, 0);
  
      width = canvas.width;
      height = canvas.height;
      imageData = c.getImageData(0, 0, width, height);
      y = 0;
      while (y &lt; height) {
          x = 0;
          while (x &lt; width) {
              var pixel = getPixel(imageData, x, y);
              func(pixel);
              setPixel(imageData, x, y, pixel);
              x++;
          }
          y++;
      }
      c.putImageData(imageData, 0, 0);
      console.log('done');
      img.src = canvas.toDataURL();
  }
  
  
  $(function() {
      img = new Image();
      img.crossOrigin = '';
      img.onload = function() {
          document.body.appendChild(img);
      }
      img.src = 'https://choros-cognition-test.s3.amazonaws.com/geotiffs/X8pEm_cl3_sm16_ra15_style_warp.png'
  
      $('#increase-button').on('click', function() {
          manipulateImage(img, function(pixel) {
              pixel[2] += 30;
          });
      });
  });
  </code></pre>
  
  <p>The strange part is that if I reset the crossOrigin attribute of the image to null in the manipulateImage function then it works. Why is this? </p>
  
  <pre><code>function manipulateImage(img, func) {
      img.crossOrigin = null;
      ....
  </code></pre>