title: getImageData cross-origin error
body: <p>Precursor: I know there have been a few questions already asked about this topic, but none of them seem to offer a straight JavaScript only solution. </p>
  
  <p>So I ran into this error where I am trying to get the pixel data from a canvas using something like <code>context.getImageData()</code>, my exact code can been seen <strong><a href="http://jsfiddle.net/YBt9k/3/" rel="noreferrer">here</a></strong> or below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;canvas id="imageCanvas" width="600" height="800"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Load Image
  var canvas = document.getElementById('imageCanvas');
  
  var image = new Image();
  image.src = 'http://emoticons.pw/emoticons/emoticon-faces-002-medium.png';
  image.onload = function() {
  
      width=image.width;
      height=image.height;
  
      var context = canvas.getContext('2d');
      context.fillStyle="#024359"; // canvas background color
      context.fillRect(0, 0, width, height);
      context.drawImage(this,0,0);
  
      imageData = context.getImageData(0,0,width, height); // PROBLEM HERE
  
      context.putImageData(imageData, 0, 0);
  }
  </code></pre>
  
  <p>I get the following errors in Chrome: </p>
  
  <blockquote>
    <p>Unable to get image data from canvas because the canvas has been
    tainted by cross-origin data.</p>
  </blockquote>
  
  <p>and then a security error as well. I don't want to make server changes or start chrome with a weird instruction thing. I feel like there has to be something I can do in JavaScript.</p>
  
  <p>Using local images only is not a problem, but when trying that, I got the same error!</p>
  
  <p>I am trying to do this without a server, if I put this on my "default" godaddy web server, are all my problems solved? I heard rumors dropbox could also simulate a server close enough?</p>