JSFiddle - React, Tailwind, and code Playground

by mmansion

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) {
     ...