WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-26 01:22:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: upload large size image overflow in placeholder

Browse Source
This commit is contained in:
RaktimaNXG
2023-12-12 15:15:19 +05:30
parent 47ddac3529
commit f13991b88b
6 changed files with 278 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/src/Component/PdfRequestFiles.js
+47 -79
View File
@@ -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;
});
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+30 -62
View File
@@ -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 = [
microfrontends/SignDocuments/src/Component/component/renderPdf.js
+6 -2
View File
@@ -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={{
microfrontends/SignDocuments/src/Component/component/signPad.js
+34 -113
View File
@@ -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 (
<div>
{!isStamp && !isImageSelect && (
<button
style={{
color: "black",
color: "black"
}}
type="button"
className="finishBtn saveBtn"
@@ -89,7 +86,7 @@ function SignPad({
}}
style={{
background: themeColor(),
color: "white",
color: "white"
}}
disabled={isSignImg || image || isDefaultSign ? false : true}
type="button"
@@ -109,6 +106,7 @@ function SignPad({
canvasRef.current.fromDataURL(isSignImg);
}
}, [isTab]);
return (
<div>
{/*isSignPad */}
@@ -120,7 +118,7 @@ function SignPad({
justifyContent: "space-between",
background: "white",
borderBottom: "1.6px solid #ebe6e6",
marginTop: "15px",
marginTop: "15px"
}}
>
<div
@@ -129,7 +127,7 @@ function SignPad({
flexDirection: "row",
justifyContent: "space-around",
alignItems: "end",
gap: 10,
gap: 10
// background: themeColor(),
}}
@@ -150,8 +148,7 @@ function SignPad({
}}
style={{
color: isTab === "signature" ? themeColor() : "#515252",
marginLeft: "2px",
marginLeft: "2px"
}}
className="signTab"
>
@@ -163,7 +160,7 @@ function SignPad({
border:
isTab === "signature"
? "1.5px solid #108783"
: "1.5px solid #ffffff",
: "1.5px solid #ffffff"
}}
></div>
</div>
@@ -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"
}}
></div>
</div>
@@ -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"
}}
></div>
</div>
@@ -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({
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer",
// background:'rgb(255, 255, 255)'
cursor: "pointer"
}}
className="signatureCanvas"
>
@@ -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({
<div
style={{
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
cursor: "pointer",
cursor: "pointer"
}}
className="signatureCanvas"
onClick={() => imageRef.current.click()}
@@ -300,7 +293,6 @@ function SignPad({
accept="image/*"
ref={imageRef}
hidden
// style={{ display: "none" }}
/>
<i className="fas fa-cloud-upload-alt uploadImgLogo"></i>
<div className="uploadImg">Upload</div>
@@ -309,24 +301,25 @@ function SignPad({
<>
<div
style={{
// position: "relative",
border: "1px solid black",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginBottom: 6,
// justifyContent:"center"
overflow: "hidden",
cursor: "pointer"
}}
className="signatureCanvas"
>
<img
alt="print img"
ref={imageRef}
// alt="preview image"
src={image.src}
alt="stamp img"
style={{
//overflow:"hidden",
objectFit: "contain",
width: "100%",
height: "100%",
objectFit: "contain"
}}
ref={imageRef}
src={image.src}
/>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
@@ -336,36 +329,11 @@ function SignPad({
)
) : (
<>
{/* {isSignImg ? (
<div
style={{
position: "relative",
border: "2px solid #888",
marginBottom: 6,
}}
className="signatureCanvas"
>
<img
alt="preview image"
src={isSignImg}
style={{
width: "100%",
height: "100%",
objectFit: "contain",
}}
/>
</div>
) : ( */}
<SignatureCanvas
ref={canvasRef}
penColor={penColor}
canvasProps={{
// width: "460px",
// height: "184px",
// width:"280px",
// height:"112px",
className: "signatureCanvas",
className: "signatureCanvas"
}}
backgroundColor="rgb(255, 255, 255)"
onEnd={() =>
@@ -373,17 +341,16 @@ function SignPad({
}
dotSize={1}
/>
{/* )} */}
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop:"4px"
marginTop: "4px"
}}
>
<div style={{display:"flex",flexDirection:"row"}}>
<div style={{ display: "flex", flexDirection: "row" }}>
{allColor.map((data, key) => {
return (
<img
@@ -396,10 +363,10 @@ function SignPad({
key === 0 && penColor === "blue"
? "2px solid blue"
: key === 1 && penColor === "red"
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white",
? "2px solid red"
: key === 2 && penColor === "black"
? "2px solid black"
: "2px solid white"
}}
onClick={() => {
if (key === 0) {
@@ -414,60 +381,14 @@ function SignPad({
width={20}
height={20}
/>
// </button>
);
})}
</div>
<SaveBtn />
</div>
</>
)}
</Modal.Body>
{/* <Modal.Footer>
{!isStamp && !isImageSelect && (
<button
style={{
color: "black",
}}
type="button"
className="finishBtn"
onClick={() => handleClear()}
>
Clear
</button>
)}
<button
onClick={() => {
if (!image) {
if (isDefaultSign) {
onSaveSign(isDefaultSign);
} else {
onSaveSign();
}
setPenColor("blue");
} else {
onSaveImage();
}
setIsSignPad(false);
setIsImageSelect(false);
setIsDefaultSign(false);
setImage();
}}
style={{
background: themeColor(),
color: "white",
}}
type="button"
className="finishBtn"
>
Save
</button>
</Modal.Footer> */}
</Modal>
</div>
);
microfrontends/SignDocuments/src/Component/recipientSignPdf.js
+22 -55
View File
@@ -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: ""
microfrontends/SignDocuments/src/utils/Utils.js
+139 -55
View File
@@ -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 = {