fix: upload large size image overflow in placeholder

microfrontends/SignDocuments/src/utils/Utils.js

@@ -77,46 +77,49 @@ export function getHostUrl() {
   }
 }
 
+export const calculateImgAspectRatio = (imgWH) => {
+  let newWidth, newHeight;
+  const aspectRatio = imgWH.width / imgWH.height;
+  if (aspectRatio === "2.533333333333333") {
+    newWidth = 150;
+    newHeight = 60;
+  } else if (aspectRatio === 1) {
+    newWidth = aspectRatio * 100;
+    newHeight = aspectRatio * 100;
+  } else if (aspectRatio < 1) {
+    newWidth = aspectRatio * 70;
+    newHeight = 70;
+  } else if (aspectRatio < 2) {
+    newWidth = aspectRatio * 100;
+    newHeight = 100;
+  } else if (aspectRatio > 2 && aspectRatio < 4) {
+    newWidth = aspectRatio * 70;
+    newHeight = 70;
+  } else if (aspectRatio > 4) {
+    newWidth = aspectRatio * 40;
+    newHeight = 40;
+  } else if (aspectRatio > 5) {
+    newWidth = aspectRatio * 10;
+    newHeight = 10;
+  }
+  return { newHeight, newWidth };
+};
+
 //function for upload stamp or image
 export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
   const updateFilter = xyPostion[index].pos.filter(
     (data, ind) =>
       data.key === signKey && data.Width && data.Height && data.SignUrl
   );
-
+  let getIMGWH = calculateImgAspectRatio(imgWH);
+  const getXYdata = xyPostion[index].pos;
   if (updateFilter.length > 0) {
-    let newWidth, newHeight;
-    const aspectRatio = imgWH.width / imgWH.height;
-
-    const getXYdata = xyPostion[index].pos;
-
-    if (aspectRatio === 1) {
-      newWidth = aspectRatio * 100;
-      newHeight = aspectRatio * 100;
-    } else if (aspectRatio < 2) {
-      newWidth = aspectRatio * 100;
-      newHeight = 100;
-    } else if (aspectRatio > 2 && aspectRatio < 4) {
-      newWidth = aspectRatio * 70;
-      newHeight = 70;
-    } else if (aspectRatio > 4) {
-      newWidth = aspectRatio * 40;
-      newHeight = 40;
-    } else if (aspectRatio > 5) {
-      newWidth = aspectRatio * 10;
-      newHeight = 10;
-    }
-
-    let getPosData = xyPostion[index].pos.filter(
-      (data) => data.key === signKey
-    );
-
     const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
-          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+          Width: getIMGWH.newWidth,
+          Height: getIMGWH.newHeight,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -131,39 +134,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
       return obj;
     });
     return newUpdateUrl;
-    // setXyPostion(newUpdateUrl);
   } else {
     const getXYdata = xyPostion[index].pos;
 
     let getPosData = xyPostion[index].pos.filter(
       (data) => data.key === signKey
     );
-    const aspectRatio = imgWH.width / imgWH.height;
-
-    let newWidth, newHeight;
-    if (aspectRatio === 1) {
-      newWidth = aspectRatio * 100;
-      newHeight = aspectRatio * 100;
-    } else if (aspectRatio < 2) {
-      newWidth = aspectRatio * 100;
-      newHeight = 100;
-    } else if (aspectRatio > 2 && aspectRatio < 4) {
-      newWidth = aspectRatio * 70;
-      newHeight = 70;
-    } else if (aspectRatio > 4) {
-      newWidth = aspectRatio * 40;
-      newHeight = 40;
-    } else if (aspectRatio > 5) {
-      newWidth = aspectRatio * 10;
-      newHeight = 10;
-    }
 
     const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
-          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+          Width: getIMGWH.newWidth,
+          Height: getIMGWH.newHeight,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -182,17 +165,46 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
 }
 
 //function for save button to save signature or image url
-export function onSaveSign(xyPostion, index, signKey, signatureImg) {
+export function onSaveSign(
+  xyPostion,
+  index,
+  signKey,
+  signatureImg,
+  imgWH,
+  isDefaultSign,
+  isSign
+) {
   let getXYdata = xyPostion[index].pos;
   let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
 
+  let getIMGWH;
+  if (isDefaultSign) {
+    getIMGWH = calculateImgAspectRatio(imgWH);
+  }
+
+  const posWidth = isDefaultSign
+    ? getIMGWH.newWidth
+    : isSign && getPosData[0].ImageType
+      ? 150
+      : getPosData[0].Width
+        ? getPosData[0].Width
+        : 150;
+  const posHidth = isDefaultSign
+    ? getIMGWH.newHeight
+    : isSign && getPosData[0].ImageType
+      ? 60
+      : getPosData[0].Height
+        ? getPosData[0].Height
+        : 60;
+
   const addSign = getXYdata.map((url, ind) => {
     if (url.key === signKey) {
       return {
         ...url,
-        Width: getPosData[0].Width ? getPosData[0].Width : 150,
-        Height: getPosData[0].Height ? getPosData[0].Height : 60,
-        SignUrl: signatureImg
+        Width: posWidth,
+        Height: posHidth,
+        SignUrl: signatureImg,
+        ImageType: "sign"
       };
     }
     return url;
@@ -207,6 +219,78 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) {
   return newUpdateUrl;
 }
 
+//function for add default signature or image for all requested location
+export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => {
+  let imgWH = { width: "", height: "" };
+  const img = new Image();
+  img.src = defaultSignImg;
+  if (img.complete) {
+    imgWH = {
+      width: img.width,
+      height: img.height
+    };
+  }
+  const getIMGWH = calculateImgAspectRatio(imgWH);
+  let xyDefaultPos = [];
+  for (let i = 0; i < xyPostion.length; i++) {
+    const getXYdata = xyPostion[i].pos;
+    const getPageNo = xyPostion[i].pageNumber;
+    const getPosData = getXYdata;
+
+    const addSign = getPosData.map((url, ind) => {
+      if (url) {
+        return {
+          ...url,
+          SignUrl: defaultSignImg,
+          Width: getIMGWH.newWidth,
+          Height: getIMGWH.newHeight,
+          ImageType: "default"
+        };
+      }
+      return url;
+    });
+
+    const newXypos = {
+      pageNumber: getPageNo,
+      pos: addSign
+    };
+    xyDefaultPos.push(newXypos);
+  }
+  return xyDefaultPos;
+};
+
+//function for select image and upload image
+export const onImageSelect = (event, setImgWH, setImage) => {
+  const imageType = event.target.files[0].type;
+  const reader = new FileReader();
+  reader.readAsDataURL(event.target.files[0]);
+
+  reader.onloadend = function (e) {
+    let width, height;
+    const image = new Image();
+
+    image.src = e.target.result;
+    image.onload = function () {
+      width = image.width;
+      height = image.height;
+      const aspectRatio = 460 / 184;
+      const imgR = width / height;
+
+      if (imgR > aspectRatio) {
+        width = 460;
+        height = 460 / imgR;
+      } else {
+        width = 184 * imgR;
+        height = 184;
+      }
+      setImgWH({ width: width, height: height });
+    };
+
+    image.src = reader.result;
+
+    setImage({ src: image.src, imgType: imageType });
+  };
+};
 //function for getting document details from contract_Documents class
 export const contractDocument = async (documentId) => {
   const data = {