How to export tainted canvas

This fiddle demonstrates how to circumvent the error message "VM101:61 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." that occurs in Chrome. By adding crossOrigin="Anonymous" to the <img> tag the image data from the canvas can be downloaded. Related Stackoverflow questions: http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas

by Leo

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>
<p>Image to use:</p>
<img id="cat" crossOrigin="Anonymous" width="100" height="80" src="https://c8.staticflickr.com/8/7492/15644563231_4d682b3c88_n.jpg" alt="The Scream">

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width/6;
var oy = canvas.height/6;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox, oy, 4*ox, 4*oy);

src = "https://c8.staticflickr.com/8/7492/15644563231_4d682b3c88_n.jpg"

var img=document.getElementById("cat");
ctx.drawImage(img,130,100,50,60,2*ox,2*oy,2*ox,2*oy);
    
download_img = function(el) {
debugger;
  var image = canvas.toDataURL("image/jpg");
  el.href = image;
};