JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<p>Original image is hosted at CORS friendly Dropbox.com</p>
<p>Using image.crossOrigin satisfies CORS requirements.</p>
<p>Then use .getImageData to "grayscale" a color image</p>
<canvas id="canvas" 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 image = new Image();
image.onload = function () {
    ctx.drawImage(image, 0, 0);

    // desaturation colors
    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imgData.data;

    for (var i = 0; i < data.length; i += 4) {
        var grayscale = 0.33 * data[i] + 0.5 * data[i + 1] + 0.15 * data[i + 2];
        data[i] = grayscale;
        data[i + 1] = grayscale;
        data[i + 2] = grayscale;
    }

    // write the modified image data
    ctx.putImageData(imgData, 0, 0);

}
image.crossOrigin = "anonymous";
image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";