canvas像素化处理

来源：互联网发布：深入解析wpf编程 pdf 编辑：程序博客网时间：2024/06/05 01:20

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

0 0