From f13991b88b83859f95c4abb5bb3384c5ef24bf23 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 12 Dec 2023 15:15:19 +0530 Subject: [PATCH] fix: upload large size image overflow in placeholder --- .../src/Component/PdfRequestFiles.js | 126 +++++------- .../src/Component/SignYourselfPdf.js | 92 +++------ .../src/Component/component/renderPdf.js | 8 +- .../src/Component/component/signPad.js | 147 +++---------- .../src/Component/recipientSignPdf.js | 77 ++----- .../SignDocuments/src/utils/Utils.js | 194 +++++++++++++----- 6 files changed, 278 insertions(+), 366 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index b889549a8..4bd54bbf9 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -20,7 +20,9 @@ import { multiSignEmbed, embedDocId, pdfNewWidthFun, - signPdfFun + signPdfFun, + calculateImgAspectRatio, + onImageSelect } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -476,35 +478,7 @@ function PdfRequestFiles() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - 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 }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; //function for upload stamp image @@ -512,7 +486,6 @@ function PdfRequestFiles() { const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); - const i = currentSigner[0].placeHolder.findIndex((object) => { return object.pageNumber === pageNumber; }); @@ -520,34 +493,16 @@ function PdfRequestFiles() { (data) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - + let getIMGWH = calculateImgAspectRatio(imgWH); if (updateFilter.length > 0) { - let newWidth, nweHeight; - const aspectRatio = imgWH.width / imgWH.height; const getXYdata = currentSigner[0].placeHolder[i].pos; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - nweHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - nweHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - nweHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - nweHeight = 10; - } const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -571,32 +526,12 @@ function PdfRequestFiles() { const getPosData = getXYdata; - const aspectRatio = imgWH.width / imgWH.height; - - let newWidth, nweHeight; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - nweHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - nweHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - nweHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - nweHeight = 10; - } - const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -622,10 +557,22 @@ function PdfRequestFiles() { //function for save button to save signature or image url const onSaveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const isSign = true; + let getIMGWH; setIsSignPad(false); setIsImageSelect(false); setImage(); - + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + let imgWH = { + width: img.width, + height: img.height + }; + getIMGWH = calculateImgAspectRatio(imgWH); + } + } const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); @@ -639,15 +586,36 @@ function PdfRequestFiles() { updateFilter = currentSigner[0].placeHolder[i].pos.filter( (data) => data.key === signKey && data.SignUrl ); - + const getXYdata = currentSigner[0].placeHolder[i].pos; + const getPosData = getXYdata; + 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; if (updateFilter.length > 0) { updateFilter[0].SignUrl = signatureImg; + updateFilter[0].Width = posWidth; + updateFilter[0].Height = posHidth; } else { - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { - return { ...url, SignUrl: signatureImg }; + return { + ...url, + SignUrl: signatureImg, + Width: posWidth, + Height: posHidth, + ImageType: "sign" + }; } return url; }); diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 7c0dc30a9..e1fad20b6 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -21,7 +21,9 @@ import { getBase64FromIMG, embedDocId, multiSignEmbed, - pdfNewWidthFun + pdfNewWidthFun, + addDefaultSignatureImg, + onImageSelect } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -490,6 +492,7 @@ function SignYourSelf() { flag, containerWH ); + //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); } @@ -634,54 +637,43 @@ function SignYourSelf() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - 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 }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; + //function for upload stamp or image + const saveImage = () => { + const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); + setXyPostion(getImage); + }; + //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); - setIsImageSelect(false); - setImage(); + + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + } const getUpdatePosition = onSaveSign( xyPostion, index, signKey, - signatureImg + signatureImg, + imgWH, + isDefaultSign, + signFlag ); setXyPostion(getUpdatePosition); @@ -740,35 +732,11 @@ function SignYourSelf() { } }; - //function for upload stamp or image - const saveImage = () => { - const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); - setXyPostion(getImage); - }; - //function for add default signature url in local array const addDefaultSignature = () => { - let xyDefaultPos = []; - for (let i = 0; i < xyPostion.length; i++) { - const getXYdata = xyPostion[i].pos; - const getPageNo = xyPostion[i].pageNumber; - const getPosData = getXYdata; + const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - const addSign = getPosData.map((url, ind) => { - if (url) { - return { ...url, SignUrl: defaultSignImg }; - } - return url; - }); - - const newXypos = { - pageNumber: getPageNo, - pos: addSign - }; - xyDefaultPos.push(newXypos); - } - - setXyPostion(xyDefaultPos); + setXyPostion(getXyData); setShowAlreadySignDoc({ status: false }); }; const tourConfig = [ diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8f7bcd5bf..a3990fe61 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -221,7 +221,9 @@ function RenderPdf({ true ); }} - lockAspectRatio={pos.Width && 2.5} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } default={{ x: xPos(pos), y: yPos(pos) @@ -776,7 +778,9 @@ function RenderPdf({ width: posWidth(pos), height: posHeight(pos) }} - lockAspectRatio={pos.Width && 2.5} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale default={{ diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index ddbe292a3..d077547bd 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -18,11 +18,10 @@ function SignPad({ isImageSelect, imageRef, onImageChange, - onSaveImage, image, defaultSign, - setSignature, + setSignature }) { const [penColor, setPenColor] = useState("blue"); const allColor = [bluePen, redPen, blackPen]; @@ -47,14 +46,12 @@ function SignPad({ //save button component const SaveBtn = () => { - // console.log("isSign",isSignImg,image) - return (
{!isStamp && !isImageSelect && (
@@ -175,7 +172,7 @@ function SignPad({ setIsTab("uploadImage"); }} style={{ - color: isTab === "uploadImage" ? themeColor() : "#515252", + color: isTab === "uploadImage" ? themeColor() : "#515252" }} className="signTab" > @@ -186,7 +183,7 @@ function SignPad({ border: isTab === "uploadImage" ? "1.5px solid #108783" - : "1.5px solid #ffffff", + : "1.5px solid #ffffff" }} > @@ -202,7 +199,7 @@ function SignPad({ }} style={{ color: - isTab === "mysignature" ? themeColor() : "#515252", + isTab === "mysignature" ? themeColor() : "#515252" }} className="signTab" > @@ -213,7 +210,7 @@ function SignPad({ border: isTab === "mysignature" ? "1.5px solid #108783" - : "1.5px solid #ffffff", + : "1.5px solid #ffffff" }} > @@ -228,7 +225,7 @@ function SignPad({ background: "none", paddingLeft: "7px", paddingRight: "7px", - marginRight: "5px", + marginRight: "5px" }} onClick={() => { setPenColor("blue"); @@ -251,14 +248,12 @@ function SignPad({
@@ -267,8 +262,7 @@ function SignPad({ style={{ width: "100%", height: "100%", - background: "rgb(255, 255, 255)", - objectFit: "contain", + objectFit: "contain" }} src={defaultSign} /> @@ -282,13 +276,12 @@ function SignPad({
imageRef.current.click()} @@ -300,7 +293,6 @@ function SignPad({ accept="image/*" ref={imageRef} hidden - // style={{ display: "none" }} />
Upload
@@ -309,24 +301,25 @@ function SignPad({ <>
print img
@@ -336,36 +329,11 @@ function SignPad({ ) ) : ( <> - {/* {isSignImg ? ( -
- preview image -
- ) : ( */} @@ -373,17 +341,16 @@ function SignPad({ } dotSize={1} /> - {/* )} */}
-
+
{allColor.map((data, key) => { return ( { if (key === 0) { @@ -414,60 +381,14 @@ function SignPad({ width={20} height={20} /> - // ); })}
-
)} - - {/* - {!isStamp && !isImageSelect && ( - - )} - - - */}
); diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index dc4f36218..6421e8a8b 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -22,7 +22,9 @@ import { urlValidator, multiSignEmbed, embedDocId, - signPdfFun + signPdfFun, + addDefaultSignatureImg, + onImageSelect } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -548,60 +550,43 @@ function EmbedPdfImage() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - 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 }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + } const getUpdatePosition = onSaveSign( xyPostion, index, signKey, - signatureImg + signatureImg, + imgWH, + isDefaultSign, + signFlag ); if (getUpdatePosition) { setXyPostion(getUpdatePosition); } }; - //function for upload stamp image const saveImage = () => { const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); @@ -647,27 +632,9 @@ function EmbedPdfImage() { }; const addDefaultSignature = () => { - let xyDefaultPos = []; - for (let i = 0; i < xyPostion.length; i++) { - const getXYdata = xyPostion[i].pos; - const getPageNo = xyPostion[i].pageNumber; - const getPosData = getXYdata; + const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - const addSign = getPosData.map((url, ind) => { - if (url) { - return { ...url, SignUrl: defaultSignImg }; - } - return url; - }); - - const newXypos = { - pageNumber: getPageNo, - pos: addSign - }; - xyDefaultPos.push(newXypos); - } - - setXyPostion(xyDefaultPos); + setXyPostion(getXyData); setAddDefaultSign({ isShow: false, alertMessage: "" diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 27659a704..a1aca4c2e 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/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 = {