canvas简单处理图片(反色处理)

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