idmission-web-sdk 2.1.20 → 2.1.21

package/dist/sdk2.cjs.development.js

@@ -234,7 +234,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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
@@ -12175,13 +12175,21 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
     }
   }, [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__namespace.default.createElement(PageContainer, {
     className: "flex ".concat((_b = classNames.container) !== null && _b !== void 0 ? _b : '')
@@ -12227,6 +12235,50 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
   }));
 };
 var AcceptBtn = styled__default.default(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) {
@@ -12366,18 +12418,22 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
       });
     });
   }, [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) {
@@ -12427,14 +12483,17 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
         });
       case 'SUCCESS':
         if (!showSuccessScreen) return;
-        return /*#__PURE__*/React__namespace.default.createElement(VideoSignatureSuccess, {
+        return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.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__namespace.default.createElement("img", {
+          src: signatureDataUrl,
+          alt: ""
+        }));
       default:
         return null;
     }