diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 214999207..d26887d24 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -12,6 +12,7 @@ import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import { + convertPNGtoJPEG, contractDocument, getBase64FromIMG, getBase64FromUrl, @@ -354,31 +355,6 @@ function PdfRequestFiles() { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } //function for called convert png signatre to jpeg in base 64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -434,32 +410,21 @@ function PdfRequestFiles() { const images = await Promise.all( imgUrlList.map(async (url) => { let signUrl = url.SignUrl; - + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; } const res = await fetch(signUrl); - return res.arrayBuffer(); }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } - + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index ab035b36b..76b74b642 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -15,7 +15,7 @@ import EmailComponent from "./component/emailComponent"; import FieldsComponent from "./component/fieldsComponent"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; -import { contractDocument, getBase64FromIMG } from "../utils/Utils"; +import { convertPNGtoJPEG, contractDocument, getBase64FromIMG } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; import { onSaveImage, onSaveSign } from "../utils/Utils"; @@ -452,33 +452,7 @@ function SignYourSelf() { if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } - //function for convert signature png base64 url to jpeg base64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -526,6 +500,11 @@ function SignYourSelf() { imgUrlList.map(async (url) => { let signUrl = url.SignUrl; + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; @@ -536,21 +515,7 @@ function SignYourSelf() { }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } - + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index b54981ee0..09a9ece88 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -14,6 +14,8 @@ import DefaultSignature from "./component/defaultSignature"; import { getBase64FromUrl, getBase64FromIMG, + contactBookName, + convertPNGtoJPEG contractUsers, contactBook, contractDocument, @@ -453,32 +455,7 @@ function EmbedPdfImage() { if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); } - //function for called convert png signatre to jpeg in base 64 - const convertPNGtoJPEG = (base64Data) => { - return new Promise((resolve, reject) => { - const canvas = document.createElement("canvas"); - const img = new Image(); - img.src = base64Data; - - img.onload = () => { - canvas.width = img.width; - canvas.height = img.height; - - const ctx = canvas.getContext("2d"); - ctx.drawImage(img, 0, 0); - - // Convert to JPEG by using the canvas.toDataURL() method - const jpegBase64Data = canvas.toDataURL("image/jpeg"); - - resolve(jpegBase64Data); - }; - - img.onerror = (error) => { - reject(error); - }; - }); - }; - + //function for convert signature png base64 url to jpeg base64 convertPNGtoJPEG(ImgUrl) .then((jpegBase64Data) => { const removeBase64Fromjpeg = "data:image/jpeg;base64,"; @@ -525,6 +502,11 @@ function EmbedPdfImage() { const images = await Promise.all( imgUrlList.map(async (url) => { let signUrl = url.SignUrl; + if (url.ImageType === "image/png") { + //function for convert signature png base64 url to jpeg base64 + const newUrl = await convertPNGtoJPEG(signUrl); + signUrl = newUrl; + } const checkUrl = urlValidator(signUrl); if (checkUrl) { signUrl = signUrl + "?get"; @@ -535,20 +517,7 @@ function EmbedPdfImage() { }) ); images.forEach(async (imgData, id) => { - let img; - if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/jpeg" - ) { - img = await pdfDoc.embedJpg(imgData); - } else if ( - imgUrlList[id].ImageType && - imgUrlList[id].ImageType === "image/png" - ) { - img = await pdfDoc.embedPng(imgData); - } else { - img = await pdfDoc.embedPng(imgData); - } + let img = await pdfDoc.embedJpg(imgData); const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height @@ -1138,4 +1107,5 @@ function EmbedPdfImage() { ); } + export default EmbedPdfImage; diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 8dd2e6827..ecbc34304 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -29,13 +29,35 @@ export async function getBase64FromIMG(url) { }; }); } +//function for convert signature png base64 url to jpeg base64 +export const convertPNGtoJPEG = (base64Data) => { + return new Promise((resolve, reject) => { + const canvas = document.createElement("canvas"); + const img = new Image(); + img.src = base64Data; + + img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + + const ctx = canvas.getContext("2d"); + ctx.fillStyle = "#ffffff"; // white color + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(img, 0, 0); + // Convert to JPEG by using the canvas.toDataURL() method + const jpegBase64Data = canvas.toDataURL("image/jpeg"); + + resolve(jpegBase64Data); + }; + + img.onerror = (error) => { + reject(error); + }; + }); +}; export function getHostUrl() { const hostUrl = window.location.href; - /// const hostUrl = "https://contracts-defaultssty.qik.ai/#/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive"; - // const hostUrl = "https://contracts-defaultssty.qik.ai/#/" - // const hostUrl = "https://lionfish-app-75ly7.ondigitalocean.app/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/legadrive" - //const hostUrl = "https://app.opensignlabs.com/rpmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/draftDocument"; if (hostUrl) { const urlSplit = hostUrl.split("/");