Изображение обрезается с использованием библиотеки HTML-to-Image ⇐ Javascript

[Anonymous]

Я делаю веб -сайт на приборной панели, где у меня есть холст, имеющий круговую диаграмму, как на изображении ниже. Экспорт изображения холста с использованием библиотеки html-to-image и в качестве PDF с использованием jspdf библиотека с использованием следующего кода.
useEffect(() => {
if (pageSettings.callForDownload) {
const input = document.getElementById(
"GraphAreaToDownload"
) as HTMLElement;

const d = new Date();
const id = `${tabTileProps.selectedTabName}_${d.getDate()}${d.getMonth() + 1
}${d.getFullYear()}:${d.getHours()}${d.getMinutes()}${d.getSeconds()}`;
if (pageSettings.downloadType === "pdf") {
// exporting for pdf
html2canvas(input).then((canvas) => {
const imageData = canvas.toDataURL("image/png");

const pdf = new jsPDF(
pageSettings.SelectedOrientation,
"px",
pageSettings.selectedFormat
);
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
const heightAndWidth = getHeightAndWidth(height, width);
pdf.addImage(
imageData,
"JPEG",
pageSettings.left_margin,
pageSettings.top_margin,
heightAndWidth.width,
heightAndWidth.height
);
pdf.save(`${id}`);
resetPageSettings();
});
} else {
//exporting for image
toPng(input, { cacheBust: true })
.then((dataUrl: any) => {
const link = document.createElement("a");
link.download = `${id}`;
link.href = dataUrl;
link.click();
resetPageSettings();
})
.catch((err: any) => {
Logger("error", "", err);
});
}
}
}, [pageSettings.callForDownload]);
< /code>
Экспорт в качестве PDF работает нормально, тогда как круговая диаграмма обрезается в экспорте как изображение.
ниже представлены экспортируемые результаты. < /p>
Экспортируется как Изображение < /p>
Экспортируется как PDF < /p>
Я пытался возиться с прокладкой и краем, но изображение все еще было обрезанным. Я ожидаю, что экспорт как изображение покажет полную круговую диаграмму, похожую на экспорт как pdf.


Подробнее здесь: https://stackoverflow.com/questions/794 ... ge-library