Edit in JSFiddle

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 = d[i];
        var g = d[i + 1];
        var b = d[i + 2];
        d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); //red
        d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); //green
        d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); //blue
    }

    return pixels;

};

var red = 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] = (r + g + b) / 3; //红色通道取平均值
        d[i + 1] = d[i + 2] = 0;
    }

    return pixels;

};

var brightness = function(pixels, delta) {

    var d = pixels.data;

    for (var i = 0; i < d.length; i += 4) {
        d[i] += delta; //red
        d[i + 1] += delta; //green
        d[i + 2] += delta; //blue
    }

    return pixels;

};

var invert = function(pixels) {

    var d = pixels.data;
    
    for (var i = 0; i < d.length; i += 4) {
        d[i] = 255 - d[i];
        d[i + 1] = 255 - d[i + 1];
        d[i + 2] = 255 - d[i + 2];
    }

    return pixels;

};

if(typeof Uint8ClampedArray !== 'undefined'){
	Uint8ClampedArray.prototype.slice = Array.prototype.slice; //Firefox and Chrome
} else if(typeof CanvasPixelArray!== 'undefined') {
	CanvasPixelArray.prototype.slice = Array.prototype.slice; //IE10 and IE9
} else {
	// Deprecated browser
}

<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>