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>