idmission-web-sdk 1.0.124 → 1.0.126

package/dist/sdk2.cjs.development.js

@@ -47,7 +47,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.124';
+var webSdkVersion = '1.0.126';
 
 function getPlatform() {
   if (typeof window === 'undefined') return;
@@ -8709,6 +8709,10 @@ var DEFAULT_CDN_URL = 'https://websdk-cdn-dev.idmission.com/assets';
 function getFrameDimensions(frame) {
   var frameWidth = frame.width,
     frameHeight = frame.height;
+  if (frame instanceof HTMLImageElement) {
+    frameWidth = frame.naturalWidth;
+    frameHeight = frame.naturalHeight;
+  }
   if (frame instanceof HTMLVideoElement) {
     frameWidth = frame.videoWidth;
     frameHeight = frame.videoHeight;
@@ -10567,35 +10571,24 @@ var CapturedImage = function CapturedImage(_a) {
   var alt = _a.alt,
     className = _a.className,
     image = _a.image;
-  var canvasRef = React.useRef(null);
   var _b = React.useState(image.imageData),
     url = _b[0],
     setUrl = _b[1];
-  React.useEffect(function () {
-    if (!image.boundingBox) {
-      console.error('no bounding box received!');
-      return;
-    }
-    var im = new Image();
-    im.onload = function () {
-      console.log('image has been loaded');
-      cropToBoundingBox(im, image.boundingBox, canvasRef.current);
-      var croppedDataUrl = canvasRef.current.toDataURL();
-      console.log('croppedDataUrl', croppedDataUrl);
-      setUrl(croppedDataUrl);
-    };
-    im.onerror = function (e) {
-      console.error('failed to load image', e);
-    };
-    im.src = image.imageData;
-  }, [image.boundingBox, image.height, image.imageData, image.width]);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CropCanvas, {
-    ref: canvasRef
-  }), /*#__PURE__*/React__default['default'].createElement(StyledImage, {
+  var _c = React.useState(false),
+    cropped = _c[0],
+    setCropped = _c[1];
+  var bbox = image.boundingBox;
+  function onLoaded(e) {
+    if (!bbox || cropped) return;
+    setCropped(true);
+    setUrl(cropToBoundingBox(e.currentTarget, bbox).toDataURL('image/jpeg', 0.95));
+  }
+  return /*#__PURE__*/React__default['default'].createElement(StyledImage, {
     alt: alt,
     className: className,
-    src: url
-  }));
+    src: url,
+    onLoad: onLoaded
+  });
 };
 var Heading$9 = styled__default['default'].h1(templateObject_2$d || (templateObject_2$d = tslib.__makeTemplateObject(["\n  margin-bottom: 12px;\n"], ["\n  margin-bottom: 12px;\n"])));
 var ImagesContainer = styled__default['default'](OverlayImageContainer)(templateObject_3$a || (templateObject_3$a = tslib.__makeTemplateObject(["\n  overflow-y: auto;\n"], ["\n  overflow-y: auto;\n"])));
@@ -10606,9 +10599,8 @@ var CapturedImageWrapper = styled__default['default'].div(templateObject_7$1 ||
   var _a, _b, _c;
   return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
 });
-var CropCanvas = styled__default['default'].canvas(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
-var StyledImage = styled__default['default'].img(templateObject_9 || (templateObject_9 = tslib.__makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n"])));
-var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9;
+var StyledImage = styled__default['default'].img(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  width: 100%;\n  border-radius: 4px;\n"], ["\n  width: 100%;\n  border-radius: 4px;\n"])));
+var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
 
 var CameraVideoTag = function CameraVideoTag(_a) {
   var _b;