Skip to content

Commit 6d2010f

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
fix transparent PNG signature issue
1 parent 2ede742 commit 6d2010f

File tree

4 files changed

+72
-151
lines changed

4 files changed

+72
-151
lines changed

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

Lines changed: 19 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ import { HTML5Backend } from "react-dnd-html5-backend";
1111
import { useParams } from "react-router-dom";
1212
import SignPad from "./component/signPad";
1313
import RenderAllPdfPage from "./component/renderAllPdfPage";
14-
import { getBase64FromIMG, getBase64FromUrl } from "../utils/Utils";
14+
import {
15+
convertPNGtoJPEG,
16+
getBase64FromIMG,
17+
getBase64FromUrl
18+
} from "../utils/Utils";
1519
import Loader from "./component/loader";
1620
import HandleError from "./component/HandleError";
1721
import Nodata from "./component/Nodata";
@@ -367,31 +371,6 @@ function PdfRequestFiles() {
367371
ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
368372
}
369373
//function for called convert png signatre to jpeg in base 64
370-
const convertPNGtoJPEG = (base64Data) => {
371-
return new Promise((resolve, reject) => {
372-
const canvas = document.createElement("canvas");
373-
const img = new Image();
374-
img.src = base64Data;
375-
376-
img.onload = () => {
377-
canvas.width = img.width;
378-
canvas.height = img.height;
379-
380-
const ctx = canvas.getContext("2d");
381-
ctx.drawImage(img, 0, 0);
382-
383-
// Convert to JPEG by using the canvas.toDataURL() method
384-
const jpegBase64Data = canvas.toDataURL("image/jpeg");
385-
386-
resolve(jpegBase64Data);
387-
};
388-
389-
img.onerror = (error) => {
390-
reject(error);
391-
};
392-
});
393-
};
394-
395374
convertPNGtoJPEG(ImgUrl)
396375
.then((jpegBase64Data) => {
397376
const removeBase64Fromjpeg = "data:image/jpeg;base64,";
@@ -447,32 +426,21 @@ function PdfRequestFiles() {
447426
const images = await Promise.all(
448427
imgUrlList.map(async (url) => {
449428
let signUrl = url.SignUrl;
450-
429+
if (url.ImageType === "image/png") {
430+
//function for convert signature png base64 url to jpeg base64
431+
const newUrl = await convertPNGtoJPEG(signUrl);
432+
signUrl = newUrl;
433+
}
451434
const checkUrl = url.SignUrl.includes("https:");
452435
if (checkUrl) {
453436
signUrl = signUrl + "?get";
454437
}
455438
const res = await fetch(signUrl);
456-
457439
return res.arrayBuffer();
458440
})
459441
);
460442
images.forEach(async (imgData, id) => {
461-
let img;
462-
if (
463-
imgUrlList[id].ImageType &&
464-
imgUrlList[id].ImageType === "image/jpeg"
465-
) {
466-
img = await pdfDoc.embedJpg(imgData);
467-
} else if (
468-
imgUrlList[id].ImageType &&
469-
imgUrlList[id].ImageType === "image/png"
470-
) {
471-
img = await pdfDoc.embedPng(imgData);
472-
} else {
473-
img = await pdfDoc.embedPng(imgData);
474-
}
475-
443+
let img = await pdfDoc.embedJpg(imgData);
476444
const imgHeight = imgUrlList[id].Height
477445
? imgUrlList[id].Height
478446
: 60;
@@ -600,17 +568,17 @@ function PdfRequestFiles() {
600568
yPosition = pos.isDrag
601569
? y * scale - height
602570
: pos.firstYPos
603-
? y * scale - height + pos.firstYPos
604-
: y * scale - height;
571+
? y * scale - height + pos.firstYPos
572+
: y * scale - height;
605573
return yPosition;
606574
} else {
607575
const y = pos.yBottom / scale;
608576

609577
yPosition = pos.isDrag
610578
? y * scale - height
611579
: pos.firstYPos
612-
? y * scale - height + pos.firstYPos
613-
: y * scale - height;
580+
? y * scale - height + pos.firstYPos
581+
: y * scale - height;
614582
return yPosition;
615583
}
616584
} else {
@@ -621,15 +589,15 @@ function PdfRequestFiles() {
621589
yPosition = pos.isDrag
622590
? y - height
623591
: pos.firstYPos
624-
? y - height + pos.firstYPos
625-
: y - height;
592+
? y - height + pos.firstYPos
593+
: y - height;
626594
return yPosition;
627595
} else {
628596
yPosition = pos.isDrag
629597
? pos.yBottom - height
630598
: pos.firstYPos
631-
? pos.yBottom - height + pos.firstYPos
632-
: pos.yBottom - height;
599+
? pos.yBottom - height + pos.firstYPos
600+
: pos.yBottom - height;
633601
return yPosition;
634602
}
635603
}

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

Lines changed: 7 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import EmailComponent from "./component/emailComponent";
1515
import FieldsComponent from "./component/fieldsComponent";
1616
import Modal from "react-bootstrap/Modal";
1717
import ModalHeader from "react-bootstrap/esm/ModalHeader";
18-
import { getBase64FromIMG } from "../utils/Utils";
18+
import { convertPNGtoJPEG, getBase64FromIMG } from "../utils/Utils";
1919
import { useParams } from "react-router-dom";
2020
import Tour from "reactour";
2121
import { onSaveImage, onSaveSign } from "../utils/Utils";
@@ -466,33 +466,7 @@ function SignYourSelf() {
466466
if (checkUrl) {
467467
ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
468468
}
469-
470469
//function for convert signature png base64 url to jpeg base64
471-
const convertPNGtoJPEG = (base64Data) => {
472-
return new Promise((resolve, reject) => {
473-
const canvas = document.createElement("canvas");
474-
const img = new Image();
475-
img.src = base64Data;
476-
477-
img.onload = () => {
478-
canvas.width = img.width;
479-
canvas.height = img.height;
480-
481-
const ctx = canvas.getContext("2d");
482-
ctx.drawImage(img, 0, 0);
483-
484-
// Convert to JPEG by using the canvas.toDataURL() method
485-
const jpegBase64Data = canvas.toDataURL("image/jpeg");
486-
487-
resolve(jpegBase64Data);
488-
};
489-
490-
img.onerror = (error) => {
491-
reject(error);
492-
};
493-
});
494-
};
495-
496470
convertPNGtoJPEG(ImgUrl)
497471
.then((jpegBase64Data) => {
498472
const removeBase64Fromjpeg = "data:image/jpeg;base64,";
@@ -540,6 +514,11 @@ function SignYourSelf() {
540514
imgUrlList.map(async (url) => {
541515
let signUrl = url.SignUrl;
542516

517+
if (url.ImageType === "image/png") {
518+
//function for convert signature png base64 url to jpeg base64
519+
const newUrl = await convertPNGtoJPEG(signUrl);
520+
signUrl = newUrl;
521+
}
543522
const checkUrl = url.SignUrl.includes("https:");
544523
if (checkUrl) {
545524
signUrl = signUrl + "?get";
@@ -550,21 +529,7 @@ function SignYourSelf() {
550529
})
551530
);
552531
images.forEach(async (imgData, id) => {
553-
let img;
554-
if (
555-
imgUrlList[id].ImageType &&
556-
imgUrlList[id].ImageType === "image/jpeg"
557-
) {
558-
img = await pdfDoc.embedJpg(imgData);
559-
} else if (
560-
imgUrlList[id].ImageType &&
561-
imgUrlList[id].ImageType === "image/png"
562-
) {
563-
img = await pdfDoc.embedPng(imgData);
564-
} else {
565-
img = await pdfDoc.embedPng(imgData);
566-
}
567-
532+
let img = await pdfDoc.embedJpg(imgData);
568533
const imgHeight = imgUrlList[id].Height
569534
? imgUrlList[id].Height
570535
: 60;

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

Lines changed: 19 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import DefaultSignature from "./component/defaultSignature";
1414
import {
1515
getBase64FromUrl,
1616
getBase64FromIMG,
17-
contactBookName
17+
contactBookName,
18+
convertPNGtoJPEG
1819
} from "../utils/Utils";
1920
import Tour from "reactour";
2021
import Signedby from "./component/signedby";
@@ -450,32 +451,7 @@ function EmbedPdfImage() {
450451
if (checkUrl) {
451452
ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
452453
}
453-
//function for called convert png signatre to jpeg in base 64
454-
const convertPNGtoJPEG = (base64Data) => {
455-
return new Promise((resolve, reject) => {
456-
const canvas = document.createElement("canvas");
457-
const img = new Image();
458-
img.src = base64Data;
459-
460-
img.onload = () => {
461-
canvas.width = img.width;
462-
canvas.height = img.height;
463-
464-
const ctx = canvas.getContext("2d");
465-
ctx.drawImage(img, 0, 0);
466-
467-
// Convert to JPEG by using the canvas.toDataURL() method
468-
const jpegBase64Data = canvas.toDataURL("image/jpeg");
469-
470-
resolve(jpegBase64Data);
471-
};
472-
473-
img.onerror = (error) => {
474-
reject(error);
475-
};
476-
});
477-
};
478-
454+
//function for convert signature png base64 url to jpeg base64
479455
convertPNGtoJPEG(ImgUrl)
480456
.then((jpegBase64Data) => {
481457
const removeBase64Fromjpeg = "data:image/jpeg;base64,";
@@ -522,6 +498,11 @@ function EmbedPdfImage() {
522498
const images = await Promise.all(
523499
imgUrlList.map(async (url) => {
524500
let signUrl = url.SignUrl;
501+
if (url.ImageType === "image/png") {
502+
//function for convert signature png base64 url to jpeg base64
503+
const newUrl = await convertPNGtoJPEG(signUrl);
504+
signUrl = newUrl;
505+
}
525506
const checkUrl = url.SignUrl.includes("https:");
526507
if (checkUrl) {
527508
signUrl = signUrl + "?get";
@@ -532,20 +513,7 @@ function EmbedPdfImage() {
532513
})
533514
);
534515
images.forEach(async (imgData, id) => {
535-
let img;
536-
if (
537-
imgUrlList[id].ImageType &&
538-
imgUrlList[id].ImageType === "image/jpeg"
539-
) {
540-
img = await pdfDoc.embedJpg(imgData);
541-
} else if (
542-
imgUrlList[id].ImageType &&
543-
imgUrlList[id].ImageType === "image/png"
544-
) {
545-
img = await pdfDoc.embedPng(imgData);
546-
} else {
547-
img = await pdfDoc.embedPng(imgData);
548-
}
516+
let img = await pdfDoc.embedJpg(imgData);
549517

550518
const imgHeight = imgUrlList[id].Height
551519
? imgUrlList[id].Height
@@ -662,17 +630,17 @@ function EmbedPdfImage() {
662630
yPosition = pos.isDrag
663631
? y * scale - height
664632
: pos.firstYPos
665-
? y * scale - height + pos.firstYPos
666-
: y * scale - height;
633+
? y * scale - height + pos.firstYPos
634+
: y * scale - height;
667635
return yPosition;
668636
} else {
669637
const y = pos.yBottom / scale;
670638

671639
yPosition = pos.isDrag
672640
? y * scale - height
673641
: pos.firstYPos
674-
? y * scale - height + pos.firstYPos
675-
: y * scale - height;
642+
? y * scale - height + pos.firstYPos
643+
: y * scale - height;
676644
return yPosition;
677645
}
678646
} else {
@@ -683,15 +651,15 @@ function EmbedPdfImage() {
683651
yPosition = pos.isDrag
684652
? y - height
685653
: pos.firstYPos
686-
? y - height + pos.firstYPos
687-
: y - height;
654+
? y - height + pos.firstYPos
655+
: y - height;
688656
return yPosition;
689657
} else {
690658
yPosition = pos.isDrag
691659
? pos.yBottom - height
692660
: pos.firstYPos
693-
? pos.yBottom - height + pos.firstYPos
694-
: pos.yBottom - height;
661+
? pos.yBottom - height + pos.firstYPos
662+
: pos.yBottom - height;
695663
return yPosition;
696664
}
697665
}
@@ -1083,7 +1051,7 @@ function EmbedPdfImage() {
10831051
isShowHeader={true}
10841052
currentSigner={true}
10851053
decline={true}
1086-
alreadySign={pdfUrl ? true :false}
1054+
alreadySign={pdfUrl ? true : false}
10871055
/>
10881056

10891057
<RenderPdf
@@ -1128,9 +1096,8 @@ function EmbedPdfImage() {
11281096
)}
11291097
</div>
11301098
)}
1131-
11321099
</DndProvider>
11331100
);
11341101
}
11351102

1136-
export default EmbedPdfImage;
1103+
export default EmbedPdfImage;

0 commit comments

Comments
 (0)