Как размыть конкретную область видео тега HTML5?

Question

для проекта VueJS, у меня есть видеоплеер с тегом HTML5. В этом видео я хочу отобразить размытые пятна в левом нижнем углу.

Я использую холст, чистый метод CSS, и ничего из этого не сработало.

В CSS: я использовал фильтр: blur (20px) на div перед vidéo, и онне работает, размытие влияет на границу div, а не на центр.

Изображение с тестом размытия в css

С холстом мы пробуем то же самое, и я никогда не получаю никакого эффекта размытия на нем

Мне просто нужноЭффект размытия на красной части изображения:

Красная часть должна быть размытой

<template>
<div>  
  <div class="contenant">
    <input  type='range' v-model="width" min="0" max="1281" value="0" >
    <img id='image' class="img" src="image1.jpg" alt="test">
    <div id='filtre' v-bind:style="{ width: width + 'px'}"></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    width: 0,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contenant {
  width: fit-content;
}

#filtre {
  height: 96%;
  background-color: red;
position: absolute;
bottom: 0;
opacity: 0.33;
top: 8px;
z-index: 2;
filter: blur(50px)
}

.img{
  position:relative;
}

input[type=range] {
  width: 81%;
  -webkit-appearance: none;
  margin: 10px 0;
  position: absolute;
  z-index: 3;
  height: -webkit-fill-available;
  background-color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  height: 26px;
  width: 26px;
  border-radius: 17px;
  background: #619BFF;
  cursor: pointer;
  -webkit-appearance: none;
}

Answer 1

В поддерживаемых браузерах это так же просто, как использовать перекрывающийся элемент со свойством CSS backdrop-filter: blur().

// just make the div follow the mouse
const mouse = {
  x: 0,
  y: 0,
  dirty: false
};
const blurme = document.getElementById('soblurme');
document.querySelector('.container')
  .addEventListener('mousemove', (evt) => {
  mouse.x = evt.offsetX;
  mouse.y = evt.offsetY;
  // recently all UI events are already debounced by UAs,
  // but all vendors didn't catch up yet
  if( !mouse.dirty ) {
    requestAnimationFrame( move );
  }
  mouse.dirty = true;
});

function move() {
  blurme.style.left = (mouse.x - 25) + 'px';
  blurme.style.top = (mouse.y - 25) + 'px';
  mouse.dirty = false;
}

.container { position: relative; }
#soblurme {
  position: absolute;
  border: 1px solid white;
  pointer-events: none;
  width: 50px;
  height: 50px;  
  left: 70px;
  top: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
video {
  width: 100%;
  cursor: none;
}

<div class="container">
  <video autoplay muted controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
  </video>
  <div id="soblurme"></div>
</div>

Для других вам нужно снова нарисовать эту часть видео на холсте:

const vid = document.querySelector('video');
const canvas = document.getElementById('soblurme');
const ctx = canvas.getContext('2d');

if( ctx.filter !== "" ) {
  // in case 2DContext.filter is not supported (Safari), some libraries can do the blur for us
  // I'll let the readers choose then they prefer and implement it
  console.warn( "we should use a falbback like StackBlur.js" );
}

const spread = 10;
ctx.filter = 'blur(' + spread + 'px)';

const border_width = 1; // because we add a css border around the canvas element

let playing = false;

vid.onplaying = startDrawing;
vid.onpause = stopDrawing;

function startDrawing() {
  playing = true;
  loop();
}
function stopDrawing() {
  playing = false;
}

function loop() {
  if( mouse.dirty ) {
    canvas.style.left = mouse.x + 'px';
    canvas.style.top = mouse.y + 'px';
    mouse.dirty = false;
  }
  draw();
  if( playing ) {
    requestAnimationFrame(loop);
  }
}
function draw() {
  const vid_rect = vid.getBoundingClientRect();
  const can_rect = canvas.getBoundingClientRect();
  const s_x = (can_rect.left - vid_rect.left) + border_width;
  const s_y = (can_rect.top - vid_rect.top) + border_width;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // if we are lazy, we can draw the whole image
  // but the blur effect is quite heavy to calculate
//  ctx.drawImage(vid, -s_x, -s_y, vid_rect.width, vid_rect.height);

  // so for better performances we may prefer to calculate the smallest area to draw
  // because blur spreads we need to draw outside a little bit anyway
  const offset = spread * 2;
  const output_w = canvas.width + (offset * 2);
  const output_h = canvas.height + (offset * 2);
  const ratio_x = vid_rect.width / vid.videoWidth;
  const ratio_y = vid_rect.height / vid.videoHeight;
  
  ctx.drawImage(
    vid,
    (s_x - offset) / ratio_x, (s_y - offset) / ratio_y, output_w  / ratio_x, output_h / ratio_y,
    -offset, -offset, output_w, output_h 
  );
}

// move with mouse
const mouse = {
  x: 0,
  y: 0,
  dirty: false
};
document.querySelector('.container')
  .addEventListener( 'mousemove', ( evt ) => {
  mouse.x = evt.offsetX - canvas.width / 2;
  mouse.y = evt.offsetY - canvas.height / 2;
  if( !mouse.dirty && !playing ) {
    requestAnimationFrame( loop ); 
  }
  mouse.dirty = true;
});

.container { position: relative; }
#soblurme {
  position: absolute;
  border: 1px solid white;
  pointer-events: none;
  left: 70px;
  top: 20px;
}
video {
  width: 100%;
}

<div class="container">
  <video autoplay muted controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
  </video>
  <canvas id="soblurme" width="50" height="50"></canvas>
</div>

И чтобы сделать его условно, мы можем обнаружить его:

const supportsBackdropFilter = (function() {
  const style = document.createElement('_').style;
  style.cssText = 'backdrop-filter: blur(2px);webkit-backdrop-filter: blur(2px)';
  return style.length !== 0 &&
    (document.documentMode === undefined || document.documentMode > 9);
})();

Так что все вместе:

const supports_backdrop_filter = (function() {
  const style = document.createElement('_').style;
  style.cssText = 'backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);';
  return style.length !== 0 &&
    (document.documentMode === undefined || document.documentMode > 9);
})();

const mouse = {
  x: 0,
  y: 0,
  dirty: false
};
const vid = document.querySelector('video');
const canvas = document.getElementById('soblurme');
let playing = false;
const ctx = canvas.getContext('2d');
const spread = 10;
const border_width = 1; // because we add a css border around the canvas element
  
document.querySelector('.container')
  .addEventListener('mousemove', (evt) => {
  mouse.x = evt.offsetX;
  mouse.y = evt.offsetY;
  if( !mouse.dirty ) {
    if( supports_backdrop_filter ) {
      requestAnimationFrame( move );
    }
    else if( !playing ) {
      requestAnimationFrame( loop );
    }
  }
  mouse.dirty = true;
});

function move() {
  canvas.style.left = (mouse.x - 25) + 'px';
  canvas.style.top = (mouse.y - 25) + 'px';
  mouse.dirty = false;
}

// unsupporting browsers 
if( !supports_backdrop_filter ) {
  ctx.filter = 'blur(' + spread + 'px)';

  vid.onplaying = startDrawing;
  vid.onpause = stopDrawing;
}

function startDrawing() {
  playing = true;
  loop();
}
function stopDrawing() {
  playing = false;
}

function loop() {
  if( mouse.dirty ) {
    move();
  }
  draw();
  if( playing ) {
    requestAnimationFrame(loop);
  }
}
function draw() {
  const vid_rect = vid.getBoundingClientRect();
  const can_rect = canvas.getBoundingClientRect();
  const s_x = (can_rect.left - vid_rect.left) + border_width;
  const s_y = (can_rect.top - vid_rect.top) + border_width;
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const offset = spread * 2;
  const output_w = canvas.width + (offset * 2);
  const output_h = canvas.height + (offset * 2);
  const ratio_x = vid_rect.width / vid.videoWidth;
  const ratio_y = vid_rect.height / vid.videoHeight;

  ctx.drawImage(
    vid,
    (s_x - offset) / ratio_x, (s_y - offset) / ratio_y, output_w  / ratio_x, output_h / ratio_y,
    -offset, -offset, output_w, output_h 
  );
}

.container { position: relative; }
#soblurme {
  position: absolute;
  border: 1px solid white;
  pointer-events: none;
  left: 70px;
  top: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
video {
  width: 100%;
  cursor: none;
}

<div class="container">
  <video autoplay muted controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
  </video>
  <canvas id="soblurme" width="50" height="50"></canvas>
</div>

---

---

ОП, заданный в комментарии, так что размытие на самом деле распространяется, а не четко, как в предыдущих примерах.

Чтобы сделать это в CSS, это должно было быть просто вопросом добавления внутреннего элемента, для которого мы бы установили фоновый фильтр с половиной размытия и некоторым запасом,и затем добавьте blur к элементу с другой половиной размытия как простое правило filter.
Однако, кажется, что в текущем Blink есть ошибка, из-за которой backdrop-filter будет просто отброшен, если один изк предкам уже применено blur() ...

Так что в настоящее время это будет работать только в Safari:

// just make the div follow the mouse
const mouse = {
  x: 0,
  y: 0,
  dirty: false
};
const blurme = document.getElementById('soblurme');
document.querySelector('.container')
  .addEventListener('mousemove', (evt) => {
  mouse.x = evt.offsetX;
  mouse.y = evt.offsetY;
  // recently all UI events are already debounced by UAs,
  // but all vendors didn't catch up yet
  if( !mouse.dirty ) {
    requestAnimationFrame( move );
  }
  mouse.dirty = true;
});

function move() {
  blurme.style.left = (mouse.x - 25) + 'px';
  blurme.style.top = (mouse.y - 25) + 'px';
  mouse.dirty = false;
}

.container { position: relative; }
#soblurme {
  position: absolute;
  pointer-events: none;
  width: 50px;
  height: 50px;  
  left: 70px;
  top: 20px;
  --spread: 10px;
  filter: blur(calc(var(--spread) ));
}
#soblurme > div {
  width: calc(100% - var(--spread));
  height: calc(100% - var(--spread));
  backdrop-filter: blur(calc(var(--spread) / 2));
  -webkit-backdrop-filter: blur(calc(var(--spread) / 2));
  padding: 10px;
}
video {
  width: 100%;
  cursor: none;
}

<div class="container">
  <video autoplay muted controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
  </video>
 <div id="soblurme"> <!-- we apply a simple blur() here -->
  <div></div> <!-- this one will get the backdrop-filter -->
 </div>
</div>

Однако хорошая новость заключается в том, что версия на холсте становится намного проще.
Что мы сделаем, так это просто нарисоваем видео наcanvas, а затем применить CSS filter:blur() к элементу canvas непосредственно из CSS.
Поскольку нам не нужно учитывать распространение, вычисления для drawImage более просты, но поскольку мы не применяем никакого фильтра,мы можем даже использовать ленивую версию, которая была в комментариях второго фрагмента:

const vid = document.querySelector('video');
const canvas = document.getElementById('soblurme');
const ctx = canvas.getContext('2d');

let playing = false;

vid.onplaying = startDrawing;
vid.onpause = stopDrawing;

function startDrawing() {
  playing = true;
  loop();
}
function stopDrawing() {
  playing = false;
}

function loop() {
  if( mouse.dirty ) {
    canvas.style.left = mouse.x + 'px';
    canvas.style.top = mouse.y + 'px';
    mouse.dirty = false;
  }
  draw();
  if( playing ) {
    requestAnimationFrame(loop);
  }
}
function draw() {
  const vid_rect = vid.getBoundingClientRect();
  const can_rect = canvas.getBoundingClientRect();
  const s_x = (can_rect.left - vid_rect.left);
  const s_y = (can_rect.top - vid_rect.top);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(vid, -s_x, -s_y, vid_rect.width, vid_rect.height);
}

// move with mouse
const mouse = {
  x: 0,
  y: 0,
  dirty: false
};
document.querySelector('.container')
  .addEventListener( 'mousemove', ( evt ) => {
  mouse.x = evt.offsetX - canvas.width / 2;
  mouse.y = evt.offsetY - canvas.height / 2;
  if( !mouse.dirty && !playing ) {
    requestAnimationFrame( loop ); 
  }
  mouse.dirty = true;
});

.container { position: relative; }
#soblurme {
  position: absolute;
  pointer-events: none;
  left: 70px;
  top: 20px;
  filter: blur(10px);
}
video {
  width: 100%;
}

<div class="container">
  <video autoplay muted controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm">
    <source src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4">
  </video>
  <canvas id="soblurme" width="50" height="50"></canvas>
</div>