<!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 = './images/douyin1.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>
canvas视频-马赛克
于 2024-09-29 11:13:38 首次发布