canvas 视频马赛克

最新推荐文章于 2024-09-29 11:25:40 发布

2201_75458544

最新推荐文章于 2024-09-29 11:25:40 发布

阅读量153

点赞数

文章标签：音视频 javascript 前端

本文链接：https://blog.csdn.net/2201_75458544/article/details/142631536

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频马赛克</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    canvas{
      border: 1px #f00 solid;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <button id="play">播放视频</button>
  <button id="pause">暂停视频</button>
  <button id="square">方形马赛克</button>
  <button id="circle">圆形马赛克</button>
  <button id="clear">高清无码</button>
</body>
</html>
<script>
  /** @type {HTMLCanvasElement} **/
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  let play = document.querySelector('#play');
  let video = document.createElement('video');
  let timmer = null;
  let square = document.querySelector('#square');
  let circle = document.querySelector('#circle');
  let clear = document.querySelector('#clear');


  
  video.src = '/video/1.mp4';

  //设置是否有马赛克
  let hasMosaic = true;

  //马赛克的类型 square方形, circle圆型
  let type = 'square';


  // 监听播放是否能够播放
  video.addEventListener('canplay', function() {
    // 点击播放按钮，开始播放视频
    play.addEventListener('click', function() {
      video.play();
      playCanvas();
    });
  });

  //播放视频
  function playCanvas() {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 判断是否有马赛克
    if (hasMosaic) {
      //获取canvas中的imageData对象
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      //获取所有像素点的数组
      let arr = imageData.data;

      //清除原来的图片
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      //设置5*5的格子
      let w = 9;
      let h = 9;
      //计算出行和列的总数
      let rows = Math.floor(canvas.height / h);
      let cols = Math.floor(canvas.width / w);

      //遍历每一个小格子
      for (let i = 0; i < rows; i++) {
        for (let j = 0; j < cols; j++) {
          //获取小格子中心点的坐标
          let x = j * w + Math.ceil(w / 2);
          let y = i * h + Math.ceil(h / 2);
          //计算坐标点在数组中的下标
          let pos = (y-1) * canvas.width*4 + (x-1) * 4;

          let r = arr[pos];
          let g = arr[pos+1];
          let b = arr[pos+2];

          ctx.fillStyle = `rgb(${r},${g},${b})`;
          //判断类型，方形还是圆形
          if (type ==='square') {
            ctx.fillRect(x-Math.ceil(w/2), y-Math.ceil(h/2), w, h);
          } else {
            ctx.beginPath();
            ctx.arc(x, y, Math.ceil(w/2), 0, 2 * Math.PI);
            ctx.fill();
          }
        }
      }
    }
    timmer =  requestAnimationFrame(playCanvas);
  }


  // 点击暂停按钮，暂停视频
  let pause = document.querySelector('#pause');
  pause.addEventListener('click', function() {
    video.pause();
    cancelAnimationFrame(timmer);
  });


  //点击方形马赛克
  square.addEventListener('click', function() {
    type ='square';
    hasMosaic = true;
  });

  //点击圆形马赛克
  circle.addEventListener('click', function() {
    type = 'circle';
    hasMosaic = true;
  });

  //点击高清无码
  clear.addEventListener('click', function() {
    hasMosaic = false;
  });

  


</script>