fix transparent PNG signature issue

This commit is contained in:
RaktimaNXG
2023-11-16 10:59:26 +05:30
parent 2ede742b10
commit 6d2010facb
4 changed files with 72 additions and 151 deletions
@@ -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;
}
}