Skip to content

Commit f13991b

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix: upload large size image overflow in placeholder
1 parent 47ddac3 commit f13991b

File tree

6 files changed

+278
-366
lines changed

6 files changed

+278
-366
lines changed

‎microfrontends/SignDocuments/src/Component/PdfRequestFiles.js‎

Lines changed: 47 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ import {
2020
multiSignEmbed,
2121
embedDocId,
2222
pdfNewWidthFun,
23-
signPdfFun
23+
signPdfFun,
24+
calculateImgAspectRatio,
25+
onImageSelect
2426
} from "../utils/Utils";
2527
import Loader from "./component/loader";
2628
import HandleError from "./component/HandleError";
@@ -476,78 +478,31 @@ function PdfRequestFiles() {
476478
//function for image upload or update
477479
const onImageChange = (event) => {
478480
if (event.target.files && event.target.files[0]) {
479-
const imageType = event.target.files[0].type;
480-
const reader = new FileReader();
481-
reader.readAsDataURL(event.target.files[0]);
482-
reader.onloadend = function (e) {
483-
let width, height;
484-
const image = new Image();
485-
image.src = e.target.result;
486-
image.onload = function () {
487-
width = image.width;
488-
height = image.height;
489-
const aspectRatio = 460 / 184;
490-
const imgR = width / height;
491-
492-
if (imgR > aspectRatio) {
493-
width = 460;
494-
height = 460 / imgR;
495-
} else {
496-
width = 184 * imgR;
497-
height = 184;
498-
}
499-
setImgWH({ width: width, height: height });
500-
imageRef.current.style.width = `${width}px`;
501-
imageRef.current.style.height = `${height}px`;
502-
};
503-
504-
image.src = reader.result;
505-
506-
setImage({ src: image.src, imgType: imageType });
507-
};
481+
onImageSelect(event, setImgWH, setImage);
508482
}
509483
};
510484
//function for upload stamp image
511485
const onSaveImage = () => {
512486
const currentSigner = signerPos.filter(
513487
(data) => data.signerObjId === signerObjectId
514488
);
515-
516489
const i = currentSigner[0].placeHolder.findIndex((object) => {
517490
return object.pageNumber === pageNumber;
518491
});
519492
const updateFilter = currentSigner[0].placeHolder[i].pos.filter(
520493
(data) =>
521494
data.key === signKey && data.Width && data.Height && data.SignUrl
522495
);
523-
496+
let getIMGWH = calculateImgAspectRatio(imgWH);
524497
if (updateFilter.length > 0) {
525-
let newWidth, nweHeight;
526-
const aspectRatio = imgWH.width / imgWH.height;
527498
const getXYdata = currentSigner[0].placeHolder[i].pos;
528-
if (aspectRatio === 1) {
529-
newWidth = aspectRatio * 100;
530-
nweHeight = aspectRatio * 100;
531-
} else if (aspectRatio < 2) {
532-
newWidth = aspectRatio * 100;
533-
nweHeight = 100;
534-
} else if (aspectRatio > 2 && aspectRatio < 4) {
535-
newWidth = aspectRatio * 70;
536-
nweHeight = 70;
537-
} else if (aspectRatio > 4) {
538-
newWidth = aspectRatio * 40;
539-
nweHeight = 40;
540-
} else if (aspectRatio > 5) {
541-
newWidth = aspectRatio * 10;
542-
nweHeight = 10;
543-
}
544499
const getPosData = getXYdata;
545500
const addSign = getPosData.map((url, ind) => {
546501
if (url.key === signKey) {
547502
return {
548503
...url,
549-
Width: newWidth,
550-
Height: nweHeight,
504+
Width: getIMGWH.newWidth,
505+
Height: getIMGWH.newHeight,
551506
SignUrl: image.src,
552507
ImageType: image.imgType
553508
};
@@ -571,32 +526,12 @@ function PdfRequestFiles() {
571526

572527
const getPosData = getXYdata;
573528

574-
const aspectRatio = imgWH.width / imgWH.height;
575-
576-
let newWidth, nweHeight;
577-
if (aspectRatio === 1) {
578-
newWidth = aspectRatio * 100;
579-
nweHeight = aspectRatio * 100;
580-
} else if (aspectRatio < 2) {
581-
newWidth = aspectRatio * 100;
582-
nweHeight = 100;
583-
} else if (aspectRatio > 2 && aspectRatio < 4) {
584-
newWidth = aspectRatio * 70;
585-
nweHeight = 70;
586-
} else if (aspectRatio > 4) {
587-
newWidth = aspectRatio * 40;
588-
nweHeight = 40;
589-
} else if (aspectRatio > 5) {
590-
newWidth = aspectRatio * 10;
591-
nweHeight = 10;
592-
}
593-
594529
const addSign = getPosData.map((url, ind) => {
595530
if (url.key === signKey) {
596531
return {
597532
...url,
598-
Width: newWidth,
599-
Height: nweHeight,
533+
Width: getIMGWH.newWidth,
534+
Height: getIMGWH.newHeight,
600535
SignUrl: image.src,
601536
ImageType: image.imgType
602537
};
@@ -622,10 +557,22 @@ function PdfRequestFiles() {
622557
//function for save button to save signature or image url
623558
const onSaveSign = (isDefaultSign) => {
624559
const signatureImg = isDefaultSign ? defaultSignImg : signature;
560+
const isSign = true;
561+
let getIMGWH;
625562
setIsSignPad(false);
626563
setIsImageSelect(false);
627564
setImage();
628-
565+
if (isDefaultSign) {
566+
const img = new Image();
567+
img.src = defaultSignImg;
568+
if (img.complete) {
569+
let imgWH = {
570+
width: img.width,
571+
height: img.height
572+
};
573+
getIMGWH = calculateImgAspectRatio(imgWH);
574+
}
575+
}
629576
const currentSigner = signerPos.filter(
630577
(data) => data.signerObjId === signerObjectId
631578
);
@@ -639,15 +586,36 @@ function PdfRequestFiles() {
639586
updateFilter = currentSigner[0].placeHolder[i].pos.filter(
640587
(data) => data.key === signKey && data.SignUrl
641588
);
642-
589+
const getXYdata = currentSigner[0].placeHolder[i].pos;
590+
const getPosData = getXYdata;
591+
const posWidth = isDefaultSign
592+
? getIMGWH.newWidth
593+
: isSign && getPosData[0].ImageType
594+
? 150
595+
: getPosData[0].Width
596+
? getPosData[0].Width
597+
: 150;
598+
const posHidth = isDefaultSign
599+
? getIMGWH.newHeight
600+
: isSign && getPosData[0].ImageType
601+
? 60
602+
: getPosData[0].Height
603+
? getPosData[0].Height
604+
: 60;
643605
if (updateFilter.length > 0) {
644606
updateFilter[0].SignUrl = signatureImg;
607+
updateFilter[0].Width = posWidth;
608+
updateFilter[0].Height = posHidth;
645609
} else {
646-
const getXYdata = currentSigner[0].placeHolder[i].pos;
647-
const getPosData = getXYdata;
648610
const addSign = getPosData.map((url, ind) => {
649611
if (url.key === signKey) {
650-
return { ...url, SignUrl: signatureImg };
612+
return {
613+
...url,
614+
SignUrl: signatureImg,
615+
Width: posWidth,
616+
Height: posHidth,
617+
ImageType: "sign"
618+
};
651619
}
652620
return url;
653621
});

‎microfrontends/SignDocuments/src/Component/SignYourselfPdf.js‎

Lines changed: 30 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ import {
2121
getBase64FromIMG,
2222
embedDocId,
2323
multiSignEmbed,
24-
pdfNewWidthFun
24+
pdfNewWidthFun,
25+
addDefaultSignatureImg,
26+
onImageSelect
2527
} from "../utils/Utils";
2628
import { useParams } from "react-router-dom";
2729
import Tour from "reactour";
@@ -490,6 +492,7 @@ function SignYourSelf() {
490492
flag,
491493
containerWH
492494
);
495+
493496
//function for call to embed signature in pdf and get digital signature pdf
494497
signPdfFun(pdfBytes, documentId);
495498
}
@@ -634,54 +637,43 @@ function SignYourSelf() {
634637
//function for image upload or update
635638
const onImageChange = (event) => {
636639
if (event.target.files && event.target.files[0]) {
637-
const imageType = event.target.files[0].type;
638-
639-
const reader = new FileReader();
640-
reader.readAsDataURL(event.target.files[0]);
641-
642-
reader.onloadend = function (e) {
643-
let width, height;
644-
const image = new Image();
645-
646-
image.src = e.target.result;
647-
image.onload = function () {
648-
width = image.width;
649-
height = image.height;
650-
const aspectRatio = 460 / 184;
651-
const imgR = width / height;
652-
653-
if (imgR > aspectRatio) {
654-
width = 460;
655-
height = 460 / imgR;
656-
} else {
657-
width = 184 * imgR;
658-
height = 184;
659-
}
660-
setImgWH({ width: width, height: height });
661-
imageRef.current.style.width = `${width}px`;
662-
imageRef.current.style.height = `${height}px`;
663-
};
664-
665-
image.src = reader.result;
666-
667-
setImage({ src: image.src, imgType: imageType });
668-
};
640+
onImageSelect(event, setImgWH, setImage);
669641
}
670642
};
671643

644+
//function for upload stamp or image
645+
const saveImage = () => {
646+
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
647+
setXyPostion(getImage);
648+
};
649+
672650
//function for save button to save signature or image url
673651
const saveSign = (isDefaultSign) => {
674652
const signatureImg = isDefaultSign ? defaultSignImg : signature;
653+
const signFlag = true;
654+
let imgWH = { width: "", height: "" };
675655
setIsSignPad(false);
676-
677656
setIsImageSelect(false);
678-
679657
setImage();
658+
659+
if (isDefaultSign) {
660+
const img = new Image();
661+
img.src = defaultSignImg;
662+
if (img.complete) {
663+
imgWH = {
664+
width: img.width,
665+
height: img.height
666+
};
667+
}
668+
}
680669
const getUpdatePosition = onSaveSign(
681670
xyPostion,
682671
index,
683672
signKey,
684-
signatureImg
673+
signatureImg,
674+
imgWH,
675+
isDefaultSign,
676+
signFlag
685677
);
686678

687679
setXyPostion(getUpdatePosition);
@@ -740,35 +732,11 @@ function SignYourSelf() {
740732
}
741733
};
742734

743-
//function for upload stamp or image
744-
const saveImage = () => {
745-
const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image);
746-
setXyPostion(getImage);
747-
};
748-
749735
//function for add default signature url in local array
750736
const addDefaultSignature = () => {
751-
let xyDefaultPos = [];
752-
for (let i = 0; i < xyPostion.length; i++) {
753-
const getXYdata = xyPostion[i].pos;
754-
const getPageNo = xyPostion[i].pageNumber;
755-
const getPosData = getXYdata;
756-
757-
const addSign = getPosData.map((url, ind) => {
758-
if (url) {
759-
return { ...url, SignUrl: defaultSignImg };
760-
}
761-
return url;
762-
});
763-
764-
const newXypos = {
765-
pageNumber: getPageNo,
766-
pos: addSign
767-
};
768-
xyDefaultPos.push(newXypos);
769-
}
737+
const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg);
770738

771-
setXyPostion(xyDefaultPos);
739+
setXyPostion(getXyData);
772740
setShowAlreadySignDoc({ status: false });
773741
};
774742
const tourConfig = [

‎microfrontends/SignDocuments/src/Component/component/renderPdf.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,9 @@ function RenderPdf({
221221
true
222222
);
223223
}}
224-
lockAspectRatio={pos.Width && 2.5}
224+
lockAspectRatio={
225+
pos.Width ? pos.Width / pos.Height : 2.5
226+
}
225227
default={{
226228
x: xPos(pos),
227229
y: yPos(pos)
@@ -776,7 +778,9 @@ function RenderPdf({
776778
width: posWidth(pos),
777779
height: posHeight(pos)
778780
}}
779-
lockAspectRatio={pos.Width && 2.5}
781+
lockAspectRatio={
782+
pos.Width ? pos.Width / pos.Height : 2.5
783+
}
780784
//if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale
781785

782786
default={{

0 commit comments

Comments
 (0)