HTML5canvas实现高斯模糊、刮刮乐

绝地灬酷狼 2022-05-12 09:38 346阅读 0赞

1.高斯模糊（Gaussian blur）

原理：将图片插入到canvas中，将canvas中的图片，getImageData得到图片的像素值，用高斯模糊函数进像素值进行处理后，再把值putImageData放到canvas中，就实现了图片的高斯模糊处理。

高斯模糊函数中的逻辑：

注意：此处是window整个页面进行加载，不可以用img来调用onload方法，会报错：高斯函数未被定义的错误。

注意：getImageData、putImageData两个方法在服务器中使用有效。

![70][]

![70 1][]

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>gauss</title>
    	<style>
    		#data{
    			width: 400px;
    			height: 300px;
    		}
    	</style>
    </head>
    <body>
    	<img id="data" src="timg.jpg" alt="">
    	<canvas id="canvas" height="500" width="500"></canvas>
    
    	<script src="gaussFun.js"></script>
    	<script>
    		var oImg = document.getElementById('data');
    		var canvas = document.getElementById('canvas');
    		var ctx = canvas.getContext('2d');
    		var oData,newSrc;
    
    
    		window.onload = function () {
    			ctx.drawImage(oImg,0,0,400,300);
    			oData = ctx.getImageData(0,0,400,300);
    			newSrc = gaussBlur(oData);
    			ctx.putImageData(newSrc, 0, 0);
    		}
    	</script>
    </body>
    </html>

高斯模糊函数：

2. 刮刮乐

原理：将canvas背景用图片设置，canvas内容用刮刮乐灰色效果，然后鼠标按下、鼠标移动、鼠标抬起，完成清除canvas内容的操作

<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>Document</title>
     </head>
     <body>
         <canvas id="canv" width="400" height="400"></canvas>
         <script>
             var oCanvas = document.getElementById('canv'),
                 ctx = oCanvas.getContext('2d'),
                 w = oCanvas.width,
                 h = oCanvas.height,
                 lastPiont = {},
                 nowPoint = {};
            function init(){
                ctx.fillStyle = '#ccc';
                ctx.fillRect(0, 0,w, h);
                ctx.globalCompositeOperation = 'destination-out';
                var img = new Image();
                img.src = './1.jpeg';
                img.onload = function(){
                    oCanvas.style.backgroundImage = 'url(' + img.src + ')';
                    oCanvas.addEventListener('mousedown', downFunc, false);
                }
            }
            init();
            function downFunc(e){
                lastPiont.x = e.clientX - oCanvas.offsetLeft;
                lastPiont.y = e.clientY - oCanvas.offsetTop;
                oCanvas.addEventListener('mousemove', moveFunc, false);
                document.addEventListener('mouseup', upFunc, false);
            }
            function moveFunc(e){
                nowPoint.x = e.clientX - oCanvas.offsetLeft;
                nowPoint.y = e.clientY - oCanvas.offsetTop;
    
                ctx.beginPath();
                ctx.fillStyle = 'red';
                ctx.lineWidth = 40;
                ctx.lineCap = 'round';
                ctx.moveTo(lastPiont.x, lastPiont.y);
                ctx.lineTo(nowPoint.x, nowPoint.y);
                ctx.stroke();
                
                ctx.arc(nowPoint.x, nowPoint.y, 20, 0, Math.PI *2);
                ctx.closePath();
                ctx.fill();
    
                lastPiont.x = nowPoint.x;
                lastPiont.y = nowPoint.y;
    
            }
            function upFunc(){
                oCanvas.removeEventListener('mousemove', moveFunc, false);
                document.removeEventListener('mouseup', upFunc, false);
                clearCanvas();
            }
            function clearCanvas(){
                var d = ctx.getImageData(0, 0, w, h),
                    c = 0,
                    len = d.data.length;
                for(var i = 0; i < len; i += 4){
                    if(d.data[i] === 0){
                        c++;
                    }
                }
                if(c > len/4 *0.7){
                    ctx.clearRect(0, 0, w, h);
                }
            }
         </script>
     </body>
     </html>

[70]: /images/20220512/3c5b86d2c7b34ffcb3823066ece666a4.png
[70 1]: /images/20220512/fb47255e1ff74ff481ab5e341a27f1a6.png