<!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>
使用canvas制作视频马赛克
最新推荐文章于 2024-10-25 16:02:47 发布