2 画布使用 drawImage 将一个画布居中在另一个画布中

Question

我试图在另一个画布上居中并将其居中。而且我希望它具有响应性，事实证明这比我想象的要难。

我有这个结构。

 <div class="photobooth"> // container
<div class="controls">    // just for the CTA btn
  <button class="cta" onClick="takePhoto()">Take Photo of your ID front please. Place the document  within the red border</button>
  <canvas class="blurPhoto" ></canvas> // the big canvas

// 小画布，用户应将文档放置在该画布的边框内 // 隐藏，这只是获取画布数据所必需的

<div class="strip">This goes to the database</div>

我想要的是一个应用了模糊的全屏背景。在那个模糊画布的中心（或者它可以是视频元素，也许对视频元素应用模糊并将画布居中会更好？），我想要一个清晰的画布，显示准实时的数据馈送在视频元素上。

内部画布的模糊背景和红色边框用作指示用户放置文档的位置（整个应用程序是 Revolut KYC UI 的原始模拟器）。

现在我不确定什么是最好的，用 CSS 或 JS 来设置这一切。

video {
position:absolute;
top:0px;
z-index:-1;
width:10%;
height:10%;
filter :blur(1px);
display:none;
}

我在这里隐藏视频，设置高度和宽度的百分比似乎并不重要，无论如何，Canvas 上的 JS 都会覆盖它。

由于我无法嵌套 Canvas，所以在这里我不知道还能做什么..

.photo { // this is the small canvas which should be centered within the big one
 position:absolute;

 width:50vw;
 height:50vh;

 border:1px red solid;


}

.blurPhoto { big canvas
 position:relative;
 width:100vw;
 height:100vh;
 filter :blur(10px);
  border:1px red solid;

 }

现在由于 .photo 画布父元素是包装 div，设置位置 top:100% 并没有达到我想要的效果，所以我将其删除。

这里我缓存了 2 个画布：

const canvas = document.querySelector('.photo');
const ctx = canvas.getContext('2d');
const canvasBig = document.querySelector('.blurPhoto');
const ctx2 = canvasBig.getContext('2d');

这里是相关的JS函数：

function paintToCanvas() {
const width = video.videoWidth;
const height = video.videoHeight;
canvas.width = width;
canvas.height = height;


return setInterval(() => {


 ctx.drawImage(video, 0,
    0, width, height);

 ctx2.drawImage(video, 0,
    0, width, height);  // this is overruled by the CSS set on it


 }, 16);
  }

那么，我该如何让它发挥作用。 我应该简单地使用视频元素作为背景吗？ 有没有可能有这样的响应？

这里是codepen链接，我改了一些CSS，还是不满意。

https://codepen.io/damPop/pen/GwqxvM

Answer 1

取自https://css-tricks.com/centering-css-complete-guide/

将两个画布放在一个容器 div 中并使用 % 技巧来居中

.container {
    position: relative;
}
.photo   {
    position: absolute;
    width:50vw;
    height:50vh;
    border:1px red solid;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.blurPhoto { big canvas
    position:absolute;
    top: 0;
    left: 0;
    width:100vw;
    height:100vh;
    filter :blur(10px);
    border:1px red solid;
 }