2 холст с использованием drawImage для центрирования одного холста внутри другого холста - PullRequest
Новая
       11

2 холст с использованием drawImage для центрирования одного холста внутри другого холста

0 голосов
/ 06 февраля 2019

Я пытаюсь центрироваться на холсте внутри другого и центрировать его.И я хотел бы, чтобы он был отзывчивым, это оказалось сложнее, чем я думал.

У меня есть такая структура. 

 <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).

Теперь я не уверен, что лучше всего настроить все это с помощью CSS или JS. 

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

Здесь я скрываю видео, кажется, не имеет значения, на каком%высота и ширина установлены, 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 canvas - это div оболочки, устанавливающий позицию top: 100% не выполняет то, что я хочу, поэтому я удалил его.

Здесь я кеширую 2 canvas: 

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

Итак, как мне заставить это работать.Должен ли я просто использовать элемент видео в качестве фона?Возможно ли иметь этот отзывчивый?

Вот ссылка на кодовый блок, я изменил некоторые CSS, но все еще не доволен.

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

1 Ответ

0 голосов
/ 06 февраля 2019

Взято с 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;
 }
...