JSFiddle - React, Tailwind, and code Playground

HTML

<div id="btnGroup">
    <button id="gray">灰度</button>
    <button id="sepia">复古</button>
    <button id="red">红色蒙版</button>
    <button id="brightness">高亮</button>
    <button id="invert">反转</button>
</div>
<canvas id="myCanvas" width="440" height="300">
    您的浏览器不支持canvas!
</canvas>

CSS

canvas{
    border:1px solid #CCC;
    background-color:#EEE;
}

JavaScript

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return;
}

var ctx = canvas.getContext("2d");

var image = new Image();
var imageData = null;
var imageDataBak = null;

image.onload = function() {
    
    if (image.width != canvas.width) {
        canvas.width = image.width * 2 + 30;
    }
    
    if (image.height != canvas.height) {
        canvas.height = image.height + 20;
    }
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.drawImage(image, 10, 10);
    
    imageData = ctx.getImageData(10, 10, (canvas.width - 20)/2, canvas.height - 20);
    imageDataBak = imageData.data.slice(0);
}

image.src = "http://images.cnblogs.com/cnblogs_com/jscode/400386/o_flower.jpg";
//image.src = "http://fiddle.jshell.net/img/initializing.png";

var btnGroup = document.getElementById('btnGroup'),
    btns = btnGroup.getElementsByTagName('button');
for (var i = 0, j = btns.length; i < j; i++) {
    btns[i].onclick = function(e) {
        imagePS(this.id);
    }
}

function imagePS(ctype) {
    switch(ctype) {
        case 'gray':
            grayscale(imageData);
            break;
        case 'sepia':
            sepia(imageData);
            break;
        case 'brightness':
            brightness(imageData, 10);
            break;
        case 'red':
            red(imageData);
            break;
        case 'invert':
            invert(imageData);
            break;
        default:
            gray(imageData);
            break;
    }
    ctx.putImageData(imageData, (canvas.width - 30 )/2 + 20, 10);
    imageData.data = imageDataBak.slice(0);
}
var grayscale = function(pixels) {

    var d = pixels.data;

    for (var i = 0; i < d.length; i += 4) {
        var r = d[i];
        var g = d[i + 1];
        var b = d[i + 2];
        d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
    }

    return pixels;

};

var sepia = function(pixels) {

    var d = pixels.data;

    for (var i = 0; i < d.length; i +=4) {
        var r...