idmission-web-sdk 2.1.20 → 2.1.21

package/dist/sdk2.umd.development.js

@@ -215,7 +215,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.1.20';
+  var webSdkVersion = '2.1.21';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -21777,13 +21777,21 @@
       }
     }, [numFramesWithoutFaces, onFaceNotDetected]);
     function onAcceptClicked() {
-      var _a;
       if (!signaturePad.current) return;
       var signatureData = signatureDataToIdmissionFormat(signaturePad.current);
       setSignatureData(signatureData);
-      setSignatureDataUrl(signaturePad.current.toDataURL());
-      stopRecordingVideo();
-      (_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
+      var signatureCanvas = signaturePad.current.getCanvas();
+      var scaledHeight = signatureCanvas.height * 600 / signatureCanvas.width;
+      var svgB64Url = signaturePad.current.getSignaturePad()._toSVG();
+      var svgContent = atob(svgB64Url.replace('data:image/svg+xml;base64,', ''));
+      var scaledSvgContent = svgContent.replace(/width="[0-9.]+"/, "width=\"600\"").replace(/height="[0-9.]+"/, "height=\"".concat(scaledHeight, "\"")).replace(/viewBox="0 0 [0-9.]+ [0-9.]+"/, "viewBox=\"0 0 ".concat(signatureCanvas.width, " ").concat(signatureCanvas.height, "\""));
+      var scaledSvgUrl = 'data:image/svg+xml;base64,' + btoa(scaledSvgContent);
+      convertSVGtoImg(scaledSvgUrl).then(function (dataUrl) {
+        var _a;
+        dataUrl && setSignatureDataUrl(dataUrl);
+        stopRecordingVideo();
+        (_a = signatureRecorder.current) === null || _a === void 0 ? void 0 : _a.stop();
+      });
     }
     return /*#__PURE__*/React.createElement(PageContainer, {
       className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
@@ -21829,6 +21837,50 @@
     }));
   };
   var AcceptBtn = styled(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  margin-left: auto;\n"], ["\n  margin-left: auto;\n"])));
+  var loadImage = function loadImage(url) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var img;
+      return __generator(this, function (_a) {
+        img = document.createElement('img');
+        img.src = url;
+        return [2 /*return*/, new Promise(function (resolve, reject) {
+          img.onload = function () {
+            return resolve(img);
+          };
+          img.onerror = reject;
+        })];
+      });
+    });
+  };
+  var convertSVGtoImg = function convertSVGtoImg(svgData_1) {
+    var args_1 = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      args_1[_i - 1] = arguments[_i];
+    }
+    return __awaiter(void 0, __spreadArray([svgData_1], args_1, true), void 0, function (svgData, format) {
+      var img, canvas, ctx;
+      if (format === void 0) {
+        format = 'jpeg';
+      }
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            return [4 /*yield*/, loadImage(svgData)];
+          case 1:
+            img = _a.sent();
+            canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            ctx = canvas.getContext('2d');
+            if (!ctx) return [2 /*return*/];
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
+            return [2 /*return*/, canvas.toDataURL("image/".concat(format), 1.0)];
+        }
+      });
+    });
+  };
   var templateObject_1$a;
 
   var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
@@ -21968,18 +22020,22 @@
         });
       });
     }, [logCaptureMetadata, selfieImage, setSelfieImage]);
+    var _p = React.useState(null),
+      signatureDataUrl = _p[0],
+      setSignatureDataUrl = _p[1];
     var onSignatureCaptureCompleted = React.useCallback(function (videoData, signatureData, signatureImageData) {
       setSignatureData(signatureData);
       setSignatureVideoUrl(URL.createObjectURL(videoData));
       setCaptureState('SUCCESS');
+      setSignatureDataUrl(signatureImageData);
       onVideoCaptured === null || onVideoCaptured === void 0 ? void 0 : onVideoCaptured(videoData, signatureData, signatureImageData);
     }, [onVideoCaptured, setSignatureData, setSignatureVideoUrl]);
     var onSignatureCaptureFacesNotDetected = React.useCallback(function () {
       setCaptureState('CHECKING_LIVENESS');
     }, []);
-    var _p = React.useState(0),
-      attempt = _p[0],
-      setAttempt = _p[1];
+    var _q = React.useState(0),
+      attempt = _q[0],
+      setAttempt = _q[1];
     var onExit = React.useCallback(function () {
       releaseCameraAccess();
       setAttempt(function (n) {
@@ -22029,14 +22085,17 @@
           });
         case 'SUCCESS':
           if (!showSuccessScreen) return;
-          return /*#__PURE__*/React.createElement(VideoSignatureSuccess, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VideoSignatureSuccess, {
             videoUrl: signatureVideoUrl !== null && signatureVideoUrl !== void 0 ? signatureVideoUrl : '',
             onDoneClick: onComplete,
             onRetryClick: onRetry,
             classNames: classNames.success,
             colors: colors.success,
             verbiage: verbiage.success
-          });
+          }), signatureDataUrl && /*#__PURE__*/React.createElement("img", {
+            src: signatureDataUrl,
+            alt: ""
+          }));
         default:
           return null;
       }