用像素块遮挡图片的某部分

最新推荐文章于 2022-08-11 09:38:25 发布

iteye_8466

最新推荐文章于 2022-08-11 09:38:25 发布

阅读量209

点赞数

分类专栏： HTML5 动画游戏文章标签： html html5 javascript ViewUI

HTML5 动画游戏专栏收录该内容

32 篇文章 1 订阅

订阅专栏

用像素块遮挡图片的某部分，它可将图像变得不可识别。效果图：
[img]http://dl2.iteye.com/upload/attachment/0091/7202/6dfc5cfb-965d-3a2f-ae76-c92b524788ac.gif[/img]

HTML5代码：

<!DOCTYPE html >
<html>
<head>
<meta charset="gb2312" />

<title>canvas 图片像素化</title>
<script type="text/javascript">
function $$(id){
      return document.getElementById(id);
}

function pageload(){
  var cnv=$$("cnvMain");
  var context=cnv.getContext("2d");

  var image = new Image();
  image.src = "example.jpg";
  image.onload=function(){
   context.drawImage(image, 0, 0, 500, 736);
   var imageData = context.getImageData(0, 0, cnv.width, cnv.height);
   var pixels = imageData.data;
   var numPixels = pixels.length;

  var numTileRows = 20;
  var numTileCols = 20;

 var tileWidth = imageData.width/numTileCols;
 var tileHeight = imageData.height/numTileRows;

  for (var r = 0; r < numTileRows; r++) {
  for (var c = 0; c < numTileCols; c++) {
   var x = (c*tileWidth)+(tileWidth/2);//圆心坐标
   var y = (r*tileHeight)+(tileHeight/2);

  // Use Math.floor to convert the pixel positions to integers
  var pos = (Math.floor(y)*(imageData.width*4))+(Math.floor(x)*4);

  var red = pixels[pos];
  var green = pixels[pos+1];
  var blue = pixels[pos+2];
  var a=0.9;
  context.fillStyle = "rgba("+red+", "+green+", "+blue+", "+a+")";
  //正方形像素化
  if(3<r&&r<7&&c>8&&c<15){
   context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight);
  }	
  };
 };
}		
}
</script>
</head>
<body onload="pageload();">
  <canvas id="cnvMain" width="500" height="736">  </canvas>
</body>
</html>