用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="board" width="500" height="500" style="background: lightgray;"></canvas> </body> </html> <script type="text/javascript"> var board = document.getElementById("board"); var context = board.getContext("2d"); var aImg = new Image(); aImg.src = "img/7.jpg"; context.beginPath(); aImg.onload = function(){ context.drawImage(aImg,100,100); var imageDatas = context.getImageData(100,100,aImg.width,aImg.height); var dataArray = imageDatas.data; //像素存在 r g b a 四个值,因此数组每四个数代表一个像素的信息,反色处理就是用 255 减去 r g b 现在的值 //如果想要灰色处理,就是 r g b 是等值的,可以将现在的 r g b 加起来除以3再分别赋值 for (var i = 0 ; i < dataArray.length ; i += 4) { var r = 255 - dataArray[i]; var g = 255 - dataArray[i+1]; var b = 255 - dataArray[i+2]; dataArray[i] = r; dataArray[i + 1] = g; dataArray[i + 2] = b; // var a = dataArray[i + 3]; //此处代表图片的透明度 // dataArray[i + 3] = a - Math.random() * 100; //透明度也是从 0-255,可以选择每个像素的透明度都是随机的一个数,这样会做出磨砂的效果 } context.putImageData(imageDatas,200,200); } </script>