diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index d741162d5..400f69930 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -11,7 +11,11 @@ import { HTML5Backend } from "react-dnd-html5-backend"; import { useParams } from "react-router-dom"; import SignPad from "./component/signPad"; import RenderAllPdfPage from "./component/renderAllPdfPage"; -import { getBase64FromIMG, getBase64FromUrl } from "../utils/Utils"; +import { + convertPNGtoJPEG, + getBase64FromIMG, + getBase64FromUrl +} from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; import Nodata from "./component/Nodata"; @@ -367,31 +371,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,"; @@ -447,32 +426,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 = url.SignUrl.includes("https:"); 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; @@ -600,8 +568,8 @@ function PdfRequestFiles() { yPosition = pos.isDrag ? y * scale - height : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; + ? y * scale - height + pos.firstYPos + : y * scale - height; return yPosition; } else { const y = pos.yBottom / scale; @@ -609,8 +577,8 @@ function PdfRequestFiles() { yPosition = pos.isDrag ? y * scale - height : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; + ? y * scale - height + pos.firstYPos + : y * scale - height; return yPosition; } } else { @@ -621,15 +589,15 @@ function PdfRequestFiles() { yPosition = pos.isDrag ? y - height : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; + ? y - height + pos.firstYPos + : y - height; return yPosition; } else { yPosition = pos.isDrag ? pos.yBottom - height : pos.firstYPos - ? pos.yBottom - height + pos.firstYPos - : pos.yBottom - height; + ? pos.yBottom - height + pos.firstYPos + : pos.yBottom - height; return yPosition; } } diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 6591667bc..0f7de9a65 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 { getBase64FromIMG } from "../utils/Utils"; +import { convertPNGtoJPEG, getBase64FromIMG } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; import { onSaveImage, onSaveSign } from "../utils/Utils"; @@ -466,33 +466,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,"; @@ -540,6 +514,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 = url.SignUrl.includes("https:"); if (checkUrl) { signUrl = signUrl + "?get"; @@ -550,21 +529,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 77b3de40e..53c822e85 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -14,7 +14,8 @@ import DefaultSignature from "./component/defaultSignature"; import { getBase64FromUrl, getBase64FromIMG, - contactBookName + contactBookName, + convertPNGtoJPEG } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -450,32 +451,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,"; @@ -522,6 +498,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 = url.SignUrl.includes("https:"); if (checkUrl) { signUrl = signUrl + "?get"; @@ -532,20 +513,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 @@ -662,8 +630,8 @@ function EmbedPdfImage() { yPosition = pos.isDrag ? y * scale - height : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; + ? y * scale - height + pos.firstYPos + : y * scale - height; return yPosition; } else { const y = pos.yBottom / scale; @@ -671,8 +639,8 @@ function EmbedPdfImage() { yPosition = pos.isDrag ? y * scale - height : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; + ? y * scale - height + pos.firstYPos + : y * scale - height; return yPosition; } } else { @@ -683,15 +651,15 @@ function EmbedPdfImage() { yPosition = pos.isDrag ? y - height : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; + ? y - height + pos.firstYPos + : y - height; return yPosition; } else { yPosition = pos.isDrag ? pos.yBottom - height : pos.firstYPos - ? pos.yBottom - height + pos.firstYPos - : pos.yBottom - height; + ? pos.yBottom - height + pos.firstYPos + : pos.yBottom - height; return yPosition; } } @@ -1083,7 +1051,7 @@ function EmbedPdfImage() { isShowHeader={true} currentSigner={true} decline={true} - alreadySign={pdfUrl ? true :false} + alreadySign={pdfUrl ? true : false} /> )} - ); } -export default EmbedPdfImage; \ No newline at end of file +export default EmbedPdfImage; diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 0b915423d..c2a87df1f 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -28,13 +28,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("/"); @@ -57,7 +79,6 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { (data, ind) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - if (updateFilter.length > 0) { let newWidth, newHeight; @@ -139,7 +160,7 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { ...url, Width: getPosData[0].Width ? getPosData[0].Width : newWidth, Height: getPosData[0].Height ? getPosData[0].Height : newHeight, - SignUrl: image.src, + SignUrl: image.src, ImageType: image.imgType }; }