使用canvas制作视频马赛克

最新推荐文章于 2024-10-25 16:02:47 发布

m0_46601454

最新推荐文章于 2024-10-25 16:02:47 发布

阅读量257

点赞数 1

文章标签：音视频 javascript 前端 canva可画

本文链接：https://blog.csdn.net/m0_46601454/article/details/142631623

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> canvas 视频马赛克 </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            display: block;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

        <canvas width="600" height="500" id="canvas"></canvas>
        <button id="btn">播放</button>
        <button id="pause">暂停</button>
        <button id="mosaic">圆形马赛克</button>
        <button id="mosaicType">方形</button>
        <button id="mosaicType1">高清无码</button>
</body>
</html>
<script>
    /** @type {HTMLCanvasElement}  **/ 
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    const video = document.createElement('video');
    video.src = './images/1.mp4';
    const btn = document.querySelector('#btn');
    const pause = document.querySelector('#pause');
    const mosaic = document.querySelector('#mosaic');
    const mosaic1 = document.querySelector('#mosaicType');
    const mosaic2 = document.querySelector('#mosaicType1');
    let timer = null;
    //设置是否有马赛克
    let hasMosaic = false;
    // 马赛克的类型 square 方形  circle 圆形
    let mosaicType = 'square';
    

    // 监听视频可以播放
    video.addEventListener('canplay', function() {
        btn.addEventListener('click', function() {
            video.play();
            playCanvas();

        })
    });
    function playCanvas() {
        ctx.drawImage(video, 0, 0, 600, 500);
        //判断是否有马赛克
        if(hasMosaic){
            //获取imageData对象
            let imgData = ctx.getImageData(0, 0, 600, 500);
            //获取像素数组
            let arr = imgData.data;
            // 清除原来的图片
            ctx.clearRect(0, 0, 600, 500);
            // 设置小格子的宽高
            let w = 10;
            let h = 10;
            // 计算出行和列的总数
            let row = Math.floor(canvas.height / h);
            let col = Math.floor(canvas.width / w);
            // 循环遍历像素数组
            for(let i=0;i<row;i++){
                for(let j=0;j<col;j++){
                    //获取小格子中心点的坐标
                    let x = j * w + Math.ceil(w / 2);
                    let y = i * h + Math.ceil(h / 2);
                    //计算坐标点在数组中的下标
                    let index = ((y-1) * canvas.width + x) * 4;
                   
                    let r = arr[index];
                    let g = arr[index+1];
                    let b = arr[index+2];
                    
                    // 根据类型设置马赛克的颜色
                    ctx.fillStyle = `rgb(${r},${g},${b})`
                    if(mosaicType ==='square'){
                        // 方形马赛克
                        ctx.fillRect(x-Math.floor(w/2),y-Math.floor(h/2),w,h);
                    }else{
                        // 圆形马赛克
                        let radius = Math.floor(w/2);
                        ctx.beginPath();
                        ctx.arc(x,y,radius,0,2*Math.PI);
                        ctx.fill();
                    }
                }
            }
        }
        timer =    window.requestAnimationFrame(playCanvas);
        console.log('播放');
    }
    // 监听视频暂停
    pause.addEventListener('click', function() {
       video.pause();
       window.cancelAnimationFrame(timer);
    });
    // 点击方形马赛克按钮
    mosaic1.addEventListener('click', function() {
        hasMosaic = true;
        mosaicType ='square';
    });
    // 点击圆形马赛克按钮
    mosaic.addEventListener('click', function() {
        hasMosaic = true;
        mosaicType = 'circle';
    });
    // 点击高清无码马赛克按钮
    mosaic2.addEventListener('click', function() {
        hasMosaic = false;
    });
    </script>