@@ -1031,8 +1100,9 @@ function scwTemplateString() {
${this.showNavigation ? `
@@ -1204,6 +1274,7 @@ class SmartCameraWeb extends HTMLElement {
this.selectBackOfIDImage = this.shadowRoot.querySelector('#select-back-of-id-image');
this.takeDocumentPhotoButton = this.idEntryScreen.querySelector('#take-photo');
this.uploadDocumentPhotoButton = this.idEntryScreen.querySelector('#upload-photo');
+ this.skipBackOfDocumentPhotoButton = this.backOfIdEntryScreen.querySelector('#skip-this-step');
this.takeBackOfDocumentPhotoButton = this.backOfIdEntryScreen.querySelector('#take-photo');
this.uploadBackOfDocumentPhotoButton = this.backOfIdEntryScreen.querySelector('#upload-photo');
@@ -1228,6 +1299,7 @@ class SmartCameraWeb extends HTMLElement {
}
if (this.takeDocumentPhotoButton) this.takeDocumentPhotoButton.addEventListener('click', () => this._startIDCamera());
+ if (this.skipBackOfDocumentPhotoButton) this.skipBackOfDocumentPhotoButton.addEventListener('click', () => this._skipBackDocument());
if (this.takeBackOfDocumentPhotoButton) this.takeBackOfDocumentPhotoButton.addEventListener('click', () => this._startIDCamera());
if (this.uploadDocumentPhotoButton) this.uploadDocumentPhotoButton.addEventListener('change', (e) => this._uploadDocument(e));
if (this.uploadBackOfDocumentPhotoButton) this.uploadBackOfDocumentPhotoButton.addEventListener('change', (e) => this._uploadDocument(e));
@@ -1537,6 +1609,10 @@ class SmartCameraWeb extends HTMLElement {
});
}
+ _skipBackDocument() {
+ this._publishSelectedImages();
+ }
+
async _uploadDocument(event) {
this.resetErrorMessage();
try {
@@ -1603,6 +1679,7 @@ class SmartCameraWeb extends HTMLElement {
return croppedCanvas.toDataURL('image/jpeg');
}
+
canvas.width = 2240;
canvas.height = 1260;
@@ -1611,19 +1688,18 @@ class SmartCameraWeb extends HTMLElement {
// NOTE: aspectRatio is greater than 1 in landscape mode, less in portrait
if (aspectRatio < 1) {
- const cropHeight = video.videoWidth * aspectRatio;
-
- context.drawImage(
- video,
- 0, (
- (video.videoHeight - cropHeight) / 2),
- video.videoWidth,
- cropHeight,
- 0,
- 0,
- canvas.width,
- canvas.height,
- );
+ const imageFrame = this.activeScreen.querySelector('[class*="image-frame"]:not([hidden]) [href*="image-frame"]');
+ const videoBox = video.getBoundingClientRect();
+ const frameBox = imageFrame.getBoundingClientRect();
+
+ const sourceXOffset = ((frameBox.left - videoBox.left) / videoBox.width) * video.videoWidth;
+ const sourceYOffset = ((frameBox.top - videoBox.top) / videoBox.height) * video.videoHeight;
+ const sourceWidth = frameBox.width * (video.videoWidth / videoBox.width);
+ const sourceHeight = frameBox.height * (video.videoHeight / videoBox.height);
+
+ canvas.height = (canvas.width * frameBox.height) / frameBox.width;
+
+ context.drawImage(video, sourceXOffset, sourceYOffset, sourceWidth, sourceHeight, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL('image/jpeg');
}
context.drawImage(video, 0, 0, canvas.width, canvas.height);
@@ -1767,6 +1843,10 @@ class SmartCameraWeb extends HTMLElement {
return this.hasAttribute('hide-back-to-host');
}
+ get documentType() {
+ return this.getAttribute('document-type');
+ }
+
get isPortraitCaptureView() {
return this.getAttribute('document-type') === 'GREEN_BOOK';
}