分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5 canvas 图片打马赛克 demo，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

<!DOCTYPE HTML>
<html>
<head>
	<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Canvas Mosaic</title>
	<style>
		#pic{
			display:none;
		}
	</style>


</head>


<body>
	The size of the original pic need to be 360 pixs.<br/>
	<img id="pic" src="star.jpg" width="360" height="360"/><br/><br/>

	canvas 标签<br/>
	<canvas id="myCanvas" width="360" height="800"></canvas>

	<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");

	var img=document.getElementById("pic");
	img.onload = function(){
		ctx.drawImage(img,0);
		var picSize = 360;
		var currentX = 0;
		var currentY = 0;
		while(currentY<picSize && currentX<picSizE){
			var imageData = ctx.getImageData(currentX,currentY,20,20);
			// need to run on server due to the using getImageDta

			var rgbaArray =caculateRGBA(imageData);

			var newImageData = ctx.createImageData(imageData);
			for (var i = 0; i <newImageData.width*newImageData.height*4; i+=4){
			newImageData.data[i+0]=rgbaArray[0];
			newImageData.data[i+1]=rgbaArraY[1];
			newImageData.data[i+2]=rgbaarray[2];
			newImageData.data[i+3]=rgbaArraY[3];
			};

			ctx.putImageData(newImageData,currentX,currentY+400);

			currentX+=20;
			if(currentX>=picSizE){
				currentX=0;
				currentY+=20;
			};
		}
	
	function caculateRGBA(imgData){
		var RGBA = [0,255];
		//caculate avg rgb
		var sumR = 0;
		var sumG = 0;
		var sumB = 0;
		var sumA = 0;
		var pixNum = imgData.width*imgData.height;
		//console.log("area width: " + imgData.width + " pixs.");
		//console.log("area heitht: " + imgData.height + " pixs.");
		//console.log("@R_363_10586@l pix number: " + pixNum);
		for (var i = 0; i <imgData.width*imgData.height*4; i+=4) {	
			sumR += imgData.data[i+0];	
			sumG += imgData.data[i+1];
			sumB += imgData.data[i+2];
			sumA += imgData.data[i+3];
		};

		var avgR = Math.round(sumR/pixNum);
		var avgG = Math.round(sumG/pixNum);
		var avgB = Math.round(sumB/pixNum);
		var avgA = Math.round(sumA/pixNum);
		/*
		console.log("R:"+avgR);
		console.log("G:"+avgG);
		console.log("B:"+avgB);
		console.log("A:"+avgA);
		*/
		RGBA[0] = avgR;
		RGBA[1] = avgG;
		RGBA[2] = avgB;
		RGBA[3] = avgA;

		console.log(RGBA);		
		return RGBA;
	};


	};
	</script>


</body>
</html>