Skip to content

Commit 79ff8fd

Browse files
nxglabsnxglabs
authored
Merge pull request #191 from raktima-opensignlabs/transparent-img
fix: #165 - transparent PNG signature issue
2 parents cdc8eb5 + 8700fd8 commit 79ff8fd

File tree

4 files changed

+50
-128
lines changed

4 files changed

+50
-128
lines changed

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

Lines changed: 7 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { useParams } from "react-router-dom";
1212
import SignPad from "./component/signPad";
1313
import RenderAllPdfPage from "./component/renderAllPdfPage";
1414
import {
15+
convertPNGtoJPEG,
1516
contractDocument,
1617
getBase64FromIMG,
1718
getBase64FromUrl,
@@ -354,31 +355,6 @@ function PdfRequestFiles() {
354355
ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
355356
}
356357
//function for called convert png signatre to jpeg in base 64
357-
const convertPNGtoJPEG = (base64Data) => {
358-
return new Promise((resolve, reject) => {
359-
const canvas = document.createElement("canvas");
360-
const img = new Image();
361-
img.src = base64Data;
362-
363-
img.onload = () => {
364-
canvas.width = img.width;
365-
canvas.height = img.height;
366-
367-
const ctx = canvas.getContext("2d");
368-
ctx.drawImage(img, 0, 0);
369-
370-
// Convert to JPEG by using the canvas.toDataURL() method
371-
const jpegBase64Data = canvas.toDataURL("image/jpeg");
372-
373-
resolve(jpegBase64Data);
374-
};
375-
376-
img.onerror = (error) => {
377-
reject(error);
378-
};
379-
});
380-
};
381-
382358
convertPNGtoJPEG(ImgUrl)
383359
.then((jpegBase64Data) => {
384360
const removeBase64Fromjpeg = "data:image/jpeg;base64,";
@@ -434,32 +410,21 @@ function PdfRequestFiles() {
434410
const images = await Promise.all(
435411
imgUrlList.map(async (url) => {
436412
let signUrl = url.SignUrl;
437-
413+
if (url.ImageType === "image/png") {
414+
//function for convert signature png base64 url to jpeg base64
415+
const newUrl = await convertPNGtoJPEG(signUrl);
416+
signUrl = newUrl;
417+
}
438418
const checkUrl = urlValidator(signUrl);
439419
if (checkUrl) {
440420
signUrl = signUrl + "?get";
441421
}
442422
const res = await fetch(signUrl);
443-
444423
return res.arrayBuffer();
445424
})
446425
);
447426
images.forEach(async (imgData, id) => {
448-
let img;
449-
if (
450-
imgUrlList[id].ImageType &&
451-
imgUrlList[id].ImageType === "image/jpeg"
452-
) {
453-
img = await pdfDoc.embedJpg(imgData);
454-
} else if (
455-
imgUrlList[id].ImageType &&
456-
imgUrlList[id].ImageType === "image/png"
457-
) {
458-
img = await pdfDoc.embedPng(imgData);
459-
} else {
460-
img = await pdfDoc.embedPng(imgData);
461-
}
462-
427+
let img = await pdfDoc.embedJpg(imgData);
463428
const imgHeight = imgUrlList[id].Height
464429
? imgUrlList[id].Height
465430
: 60;

‎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 { contractDocument, getBase64FromIMG } from "../utils/Utils";
18+
import { convertPNGtoJPEG, contractDocument, getBase64FromIMG } from "../utils/Utils";
1919
import { useParams } from "react-router-dom";
2020
import Tour from "reactour";
2121
import { onSaveImage, onSaveSign } from "../utils/Utils";
@@ -452,33 +452,7 @@ function SignYourSelf() {
452452
if (checkUrl) {
453453
ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
454454
}
455-
456455
//function for convert signature png base64 url to jpeg base64
457-
const convertPNGtoJPEG = (base64Data) => {
458-
return new Promise((resolve, reject) => {
459-
const canvas = document.createElement("canvas");
460-
const img = new Image();
461-
img.src = base64Data;
462-
463-
img.onload = () => {
464-
canvas.width = img.width;
465-
canvas.height = img.height;
466-
467-
const ctx = canvas.getContext("2d");
468-
ctx.drawImage(img, 0, 0);
469-
470-
// Convert to JPEG by using the canvas.toDataURL() method
471-
const jpegBase64Data = canvas.toDataURL("image/jpeg");
472-
473-
resolve(jpegBase64Data);
474-
};
475-
476-
img.onerror = (error) => {
477-
reject(error);
478-
};
479-
});
480-
};
481-
482456
convertPNGtoJPEG(ImgUrl)
483457
.then((jpegBase64Data) => {
484458
const removeBase64Fromjpeg = "data:image/jpeg;base64,";
@@ -526,6 +500,11 @@ function SignYourSelf() {
526500
imgUrlList.map(async (url) => {
527501
let signUrl = url.SignUrl;
528502

503+
if (url.ImageType === "image/png") {
504+
//function for convert signature png base64 url to jpeg base64
505+
const newUrl = await convertPNGtoJPEG(signUrl);
506+
signUrl = newUrl;
507+
}
529508
const checkUrl = urlValidator(signUrl);
530509
if (checkUrl) {
531510
signUrl = signUrl + "?get";
@@ -536,21 +515,7 @@ function SignYourSelf() {
536515
})
537516
);
538517
images.forEach(async (imgData, id) => {
539-
let img;
540-
if (
541-
imgUrlList[id].ImageType &&
542-
imgUrlList[id].ImageType === "image/jpeg"
543-
) {
544-
img = await pdfDoc.embedJpg(imgData);
545-
} else if (
546-
imgUrlList[id].ImageType &&
547-
imgUrlList[id].ImageType === "image/png"
548-
) {
549-
img = await pdfDoc.embedPng(imgData);
550-
} else {
551-
img = await pdfDoc.embedPng(imgData);
552-
}
553-
518+
let img = await pdfDoc.embedJpg(imgData);
554519
const imgHeight = imgUrlList[id].Height
555520
? imgUrlList[id].Height
556521
: 60;

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

Lines changed: 10 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import DefaultSignature from "./component/defaultSignature";
1414
import {
1515
getBase64FromUrl,
1616
getBase64FromIMG,
17+
contactBookName,
18+
convertPNGtoJPEG
1719
contractUsers,
1820
contactBook,
1921
contractDocument,
@@ -453,32 +455,7 @@ function EmbedPdfImage() {
453455
if (checkUrl) {
454456
ImgUrl = await getBase64FromIMG(ImgUrl + "?get");
455457
}
456-
//function for called convert png signatre to jpeg in base 64
457-
const convertPNGtoJPEG = (base64Data) => {
458-
return new Promise((resolve, reject) => {
459-
const canvas = document.createElement("canvas");
460-
const img = new Image();
461-
img.src = base64Data;
462-
463-
img.onload = () => {
464-
canvas.width = img.width;
465-
canvas.height = img.height;
466-
467-
const ctx = canvas.getContext("2d");
468-
ctx.drawImage(img, 0, 0);
469-
470-
// Convert to JPEG by using the canvas.toDataURL() method
471-
const jpegBase64Data = canvas.toDataURL("image/jpeg");
472-
473-
resolve(jpegBase64Data);
474-
};
475-
476-
img.onerror = (error) => {
477-
reject(error);
478-
};
479-
});
480-
};
481-
458+
//function for convert signature png base64 url to jpeg base64
482459
convertPNGtoJPEG(ImgUrl)
483460
.then((jpegBase64Data) => {
484461
const removeBase64Fromjpeg = "data:image/jpeg;base64,";
@@ -525,6 +502,11 @@ function EmbedPdfImage() {
525502
const images = await Promise.all(
526503
imgUrlList.map(async (url) => {
527504
let signUrl = url.SignUrl;
505+
if (url.ImageType === "image/png") {
506+
//function for convert signature png base64 url to jpeg base64
507+
const newUrl = await convertPNGtoJPEG(signUrl);
508+
signUrl = newUrl;
509+
}
528510
const checkUrl = urlValidator(signUrl);
529511
if (checkUrl) {
530512
signUrl = signUrl + "?get";
@@ -535,20 +517,7 @@ function EmbedPdfImage() {
535517
})
536518
);
537519
images.forEach(async (imgData, id) => {
538-
let img;
539-
if (
540-
imgUrlList[id].ImageType &&
541-
imgUrlList[id].ImageType === "image/jpeg"
542-
) {
543-
img = await pdfDoc.embedJpg(imgData);
544-
} else if (
545-
imgUrlList[id].ImageType &&
546-
imgUrlList[id].ImageType === "image/png"
547-
) {
548-
img = await pdfDoc.embedPng(imgData);
549-
} else {
550-
img = await pdfDoc.embedPng(imgData);
551-
}
520+
let img = await pdfDoc.embedJpg(imgData);
552521

553522
const imgHeight = imgUrlList[id].Height
554523
? imgUrlList[id].Height
@@ -1138,4 +1107,5 @@ function EmbedPdfImage() {
11381107
</DndProvider>
11391108
);
11401109
}
1110+
11411111
export default EmbedPdfImage;

‎microfrontends/SignDocuments/src/utils/Utils.js‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,35 @@ export async function getBase64FromIMG(url) {
2929
};
3030
});
3131
}
32+
//function for convert signature png base64 url to jpeg base64
33+
export const convertPNGtoJPEG = (base64Data) => {
34+
return new Promise((resolve, reject) => {
35+
const canvas = document.createElement("canvas");
36+
const img = new Image();
37+
img.src = base64Data;
38+
39+
img.onload = () => {
40+
canvas.width = img.width;
41+
canvas.height = img.height;
42+
43+
const ctx = canvas.getContext("2d");
44+
ctx.fillStyle = "#ffffff"; // white color
45+
ctx.fillRect(0, 0, canvas.width, canvas.height);
46+
ctx.drawImage(img, 0, 0);
47+
// Convert to JPEG by using the canvas.toDataURL() method
48+
const jpegBase64Data = canvas.toDataURL("image/jpeg");
49+
50+
resolve(jpegBase64Data);
51+
};
52+
53+
img.onerror = (error) => {
54+
reject(error);
55+
};
56+
});
57+
};
3258

3359
export function getHostUrl() {
3460
const hostUrl = window.location.href;
35-
/// const hostUrl = "https://contracts-defaultssty.qik.ai/#/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive";
36-
// const hostUrl = "https://contracts-defaultssty.qik.ai/#/"
37-
// const hostUrl = "https://lionfish-app-75ly7.ondigitalocean.app/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive"
38-
//const hostUrl = "https://app.opensignlabs.com/rpmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/draftDocument";
3961

4062
if (hostUrl) {
4163
const urlSplit = hostUrl.split("/");

0 commit comments

Comments
 (0)