使用相机HTML API

Question

我在那里我试图做类似Revoluts KYC文档上传验证界面codepen。

我有2个问题作斗争。

首先，我想需要的图像的应用正在画布的中心一定区域内拍摄。在画布的其余部分应该是这样的，RGBA（0,0,0,0.3）或模糊的背景。我不知道如何做到这一点，再也没有深入到画布上。所以，我想在画布上略有重叠，在它的中心在哪里使用可以采取文档的图片所需的targed区域。

接下来的事情是，我在画布上的按钮。

<button class="cta" onClick="takePhoto()">Take Photo of your ID front please</button>

我有一个计数器的更新已经提供了多少图像计数。我希望国家通过1对每一次点击递增和CTA按钮的innerHTML值进行相应的更新。 IF 3个文档已经被提供时，数据被发送关闭的后端等。

const cta = document.querySelector('.cta');
 let counter = 0;

这不会发生，但。

下面是函数的一部分：

function takePhoto() {

// played the sound
counter += 1;  //  this happens
cta.innerHMTL = "" // this doesnt
if( counter === 0) {  // nope
cta.innerHMTL = "Take a photo of your ID front please";
}
 if( counter === 1) { //nope
 cta.innerHMTL = "Take a photo of your ID back please";
 }
 if( counter === 2) {
 cta.innerHMTL = "Please take a selfie holding the ID document";
 }

对不起，在一个2个问题，我很欣赏的任何帮助，特别是在画布上的一部分。

这里是codepen：

https://codepen.io/damPop/pen/GwqxvM?editors=0110

Answer 1

这是工作用innerText

我也看着你codepen和测试存在，也适用。

const cta = document.querySelector('.cta');
let counter = 0;



function takePhoto() {
  // played the sound
  counter += 1; //  this happens
  cta.innerText = "Done";
  if (counter === 0) {
    cta.innerText = "Take a photo of your ID front please";
  }
  if (counter === 1) { 
    cta.innerText = "Take a photo of your ID back please";
  }
  if (counter === 2) {
    cta.innerText = "Please take a selfie holding the ID document";
  }
}

<button class="cta" onclick="takePhoto()">My button</button>