JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p>Original external image</p>
<canvas id="canvas" width=140 height=140></canvas>
<p>.getImageData with .crossOrigin='anonymous'
    <p>[Succeeds in Chrome+Mozilla, still fails in IE]</p>
    <canvas id="canvasAnonymous" width=140 height=140></canvas>
    <p>.getImageData without .crossOrigin='anonymous'
        <p>[Fails on all browsers]</p>
        <canvas id="canvasCORS" width=140 height=140></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasCORS=document.getElementById("canvasCORS");
var ctxCORS=canvasCORS.getContext("2d");
var canvasAnonymous=document.getElementById("canvasAnonymous");
var ctxAnonymous=canvasAnonymous.getContext("2d");

// Using image WITHOUT crossOrigin=anonymous
// Fails in all browsers
var externalImage1=new Image();
externalImage1.onload=function(){
    canvas.width=externalImage1.width;
    canvas.height=externalImage1.height;
    ctx.drawImage(externalImage1,0,0);
    // use getImageData to replace blue with yellow
    var imageData=recolorImage(externalImage1,0,0,255,255,255,0);
    // put the altered data back on the canvas  
    // this will FAIL on a CORS violation
    ctxCORS.putImageData(imageData,0,0);    
}
externalImage1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

// Using image WITH crossOrigin=anonymous
// Succeeds in Chrome+Mozilla, Still fails in IE
var externalImage2=new Image();
externalImage2.onload=function(){
    canvas.width=externalImage2.width;
    canvas.height=externalImage2.height;
    ctx.drawImage(externalImage2,0,0);
    // use getImageData to replace blue with yellow
    var imageData=recolorImage(externalImage2,0,0,255,255,255,0);
    // put the altered data back on the canvas  
    // this will FAIL on a CORS violation
    ctxAnonymous.putImageData(imageData,0,0);    
}
externalImage2.crossOrigin = "Anonymous";
externalImage2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";


function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){
    var c = document.createElement('canvas');
    var ctx=c.getContext("2d");
    var w = img.width;
    var h = img.height;
    c.width = w;
    c.height = h;
    
    // draw the image on the temporary canvas
    ctx.drawImage(img, 0, 0, w, h);
    
    // pull the entire image into an array of pixel data
    var imageData =...