Capture and review document

packages/components/document-capture/DocumentCapture.js

@@ -17,6 +17,7 @@ class DocumentCapture extends HTMLElement {
 
 		this.idCapture = this.querySelector('id-capture');
 		this.documentInstruction = this.querySelector('document-instruction');
+		this.idReview = this.querySelector('id-review');
 		this.documentInstruction.addEventListener('DocumentInstruction::StartCamera', async () => {
 			await SmartCamera.getMedia({
 				audio: false,
@@ -32,7 +33,14 @@ class DocumentCapture extends HTMLElement {
 
 			this.documentInstruction.setAttribute('hidden', '');
 			this.idCapture.removeAttribute('hidden');
-		})
+		});
+
+		this.idCapture.addEventListener('IDCapture::ImageCaptured', (event) => {
+			console.log("event.detail.image", event.detail);
+			this.idCapture.setAttribute('hidden', '');
+			this.idReview.setAttribute('data-image', event.detail.image);
+			this.idReview.removeAttribute('hidden');
+		});
 	}
 
 	get hideInstructions() {

packages/components/document-capture/id-capture/src/IdCaptureScreen.js

@@ -323,35 +323,82 @@ class IdCaptureScreen extends HTMLElement {
 
     this.handleIDStream(SmartCamera.stream);
   }
+
   _captureIDImage() {
     const image = this._drawIDImage();
 
-    if (this.activeScreen === this.IDCameraScreen) {
-      this.IDReviewImage.src = image;
-    } else {
-      this.backOfIDReviewImage.src = image;
-    }
-
-    this._data.images.push({
-      image: image.split(',')[1],
-      image_type_id: this.activeScreen === this.IDCameraScreen ? 3 : 7,
-    });
-
     this._stopIDVideoStream();
 
-    if (this.activeScreen === this.IDCameraScreen) {
-      this.setActiveScreen(this.IDReviewScreen);
-    } else {
-      this.setActiveScreen(this.backOfIDReviewScreen);
-    }
-
     this.dispatchEvent(new CustomEvent('IDCapture::ImageCaptured', {
       detail: {
         image,
       },
     }));
   }
 
+  _drawIDImage(video = this._IDVideo) {
+    const canvas = document.createElement('canvas');
+    if (this.isPortraitCaptureView) {
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+
+      // Draw the video frame onto the canvas
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+      // Get the dimensions of the video preview frame
+      const previewWidth = PORTRAIT_ID_PREVIEW_WIDTH;
+      const previewHeight = PORTRAIT_ID_PREVIEW_HEIGHT;
+
+      // Define the padding value
+      const paddingPercent = 0.5; // 50% of the preview dimensions;
+      const paddedWidth = previewWidth * (1 + paddingPercent);
+      const paddedHeight = previewHeight * (1 + paddingPercent);
+
+      // Calculate the dimensions of the cropped image based on the padded preview frame dimensions
+      const cropWidth = paddedWidth;
+      const cropHeight = paddedHeight;
+      const cropLeft = (canvas.width - cropWidth) / 2;
+      const cropTop = (canvas.height - cropHeight) / 2;
+
+      // Create a new canvas element for the cropped image
+      const croppedCanvas = document.createElement('canvas');
+      croppedCanvas.width = cropWidth;
+      croppedCanvas.height = cropHeight;
+
+      // Draw the cropped image onto the new canvas
+      const croppedCtx = croppedCanvas.getContext('2d');
+      croppedCtx.drawImage(canvas, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+
+      return croppedCanvas.toDataURL('image/jpeg');
+    }
+
+    canvas.width = 2240;
+    canvas.height = 1260;
+
+    const context = canvas.getContext('2d');
+    const aspectRatio = video.videoWidth / video.videoHeight;
+
+    // NOTE: aspectRatio is greater than 1 in landscape mode, less in portrait
+    if (aspectRatio < 1) {
+      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);
+    return canvas.toDataURL('image/jpeg');
+  }
+
   _drawImage(canvas, enableImageTests = true, video = SmartCamera.stream) {
     this.resetErrorMessage();
     const context = canvas.getContext('2d');
@@ -419,6 +466,7 @@ class IdCaptureScreen extends HTMLElement {
   _stopIDVideoStream(stream = this._IDStream) {
     stream.getTracks().forEach((track) => track.stop());
   }
+
   setUpEventListeners() {
     this.IDCameraScreen = this.shadowRoot.querySelector('#id-camera-screen');
     this.captureIDImage = this.shadowRoot.querySelector('#capture-id-image');
@@ -483,6 +531,10 @@ class IdCaptureScreen extends HTMLElement {
     return this.getAttribute('hidden');
   }
 
+  get isBackOfId() {
+    return this.hasAttribute('isBackOfId');
+  }
+
   static get observedAttributes() {
     return ["title", 'hidden', 'show-navigation', 'hide-back-to-host'];
   }

packages/components/document-capture/id-review/src/IdReview.js

@@ -400,7 +400,7 @@ class IdReview extends HTMLElement {
 	}
 
 	static get observedAttributes() {
-		return ['hide-back-to-host', 'show-navigation', 'src'];
+		return ['hide-back-to-host', 'show-navigation', 'data-image'];
 	}
 
 	get hideBack() {
@@ -420,7 +420,7 @@ class IdReview extends HTMLElement {
 	}
 
 	get imageSrc() {
-		return this.getAttribute("src");
+		return this.getAttribute("data-image");
 	}
 
 	get title() {
@@ -438,7 +438,7 @@ class IdReview extends HTMLElement {
 
 	attributeChangedCallback(name) {
 		switch (name) {
-			case 'src':
+			case 'data-image':
 			case 'hide-back-to-host':
 			case 'show-navigation':
 				this.shadowRoot.innerHTML = this.render();
@@ -486,7 +486,7 @@ class IdReview extends HTMLElement {
 	}
 }
 
-if ("customElements" in window) {
+if ("customElements" in window && !customElements.get("id-review")) {
 	window.customElements.define("id-review", IdReview);
 }
 

packages/components/document-capture/id-review/src/IdReview.stories.js

@@ -10,7 +10,7 @@ export const IdReview = {
     render: () => `
         <id-review
             show-navigation
-            src="https://placehold.co/600x400"
+            data-image="https://placehold.co/600x400"
         >
         </id-review>
     `,