<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var ctx =myCanvas.getContext('2d');
var imgObj = new Image();
imgObj.src = 'img/1.jpg';
imgObj.onload = function(){
ctx.drawImage(this,0,0,myCanvas.width/2,myCanvas.height/2);
var imgDate = ctx.getImageData(0,0,myCanvas.width,myCanvas.height);
var pixels = imgDate.data;
for (var i = 0; i < pixels.length; i+=4) {
pixels[i+3] = 155;
}
ctx.putImageData(imgDate,myCanvas.width/2,myCanvas.height/2);
console.log(imgDate.data);
}
</script>
</html>
灰度：
var r = pixels[i];
var g =pixels[i+1];
var b = pixels[i+2];
var rgb = (r+g+b)/3;
pixels[i] = rgb;
pixels[i+1] = rgb;
pixels[i+2] = rgb;
反色
var r = pixels[i];
var g =pixels[i+1];
var b = pixels[i+2];
pixels[i] = 255-r;
pixels[i+1] = 255-g;
pixels[i+2] = 255- b;
