2个帆布使用的drawImage到另一画布中居中一个帆布

问题描述 投票:0回答:1

我想在另一个在画布上居中和居中。我想它是反应灵敏,比我想象的要这已被证明很难。

我有这样的结构。

 <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;
}

在这里,我隐藏视频,它似乎没有什么%的高度和宽度设置为重要,在画布上的JS覆盖也无妨。

正如我不能嵌套帆布,在这里我不知道还能做什么..

.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,设定位置顶: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

javascript css html5 canvas html5-video
1个回答
0
投票

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;
 }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.