title: canvas has been tainted by cross-origin data work around
body: <p>im writing a script (or editing and hacking things together) to edit the look of images on a page. I know the basics of javascript but this is my first time looking at canvas. so bear with me</p>
  
  <p>I'm getting this error: </p>
  
  <p><strong>Unable to get image data from canvas because the canvas has been tainted by cross-origin data.</strong> </p>
  
  <p>so heres my code snippet throwing the error:</p>
  
  <pre><code>var canvas = document.createElement('canvas'),
              context = canvas.getContext('2d'),
              height = img.naturalHeight || img.offsetHeight || img.height,
              width = img.naturalWidth || img.offsetWidth || img.width,
              imgData;
  
  
          canvas.height = height;
          canvas.width = width;
          context.drawImage(img, 0, 0);
  
          console.log(context);
          try {
              imgData = context.getImageData(0, 0, width, height);
          } catch(e) {}
  </code></pre>
  
  <p>now i found this post :</p>
  
  <p><a href="http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/" rel="noreferrer">http://bolsterweb.com/2012/06/grabbing-image-data-external-source-canvas-element/</a></p>
  
  <p>but i have no idea how to make it fit my needs..</p>
  
  <p>I know its all due to security and all that - but is there a work around to make it all happen?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Oh wait.. the error is because you can't getImageData.. so is there away to make it 'local'</p>