JSPDF добавляет изображение в неправильном размере и положении при использовании размеров от GetBoundingClientRect и Cli ⇐ Javascript

[Anonymous]

Я пытаюсь добавить HTMlelement в PDF после преобразования его в изображение с использованием «topng» из «html-to-image» .
Htmlelement существует внутри другой, которая играет роль страницы (используется для визуализации перед визуализацией). Я рассчитываю смещения изображения (компонента), используя расстояние между ограничивающими ящиками элемента и его родителем («страница»): < /p>

Код: Выделить всё

    // page header is the element to render!
const { parentElement } = pageHeader;
if (!parentElement) {
return;
}
const parentRect = parentElement.getBoundingClientRect();
const headerRect = pageHeader.getBoundingClientRect();
const xOffset = headerRect.left - parentRect.left;
const yOffset = headerRect.top - parentRect.top;

Для размера изображения я использую clientHeight/clientWidth:
const imgHeight = pageHeader.clientHeight;
const imgWidth = pageHeader.clientWidth;
< /code>
Вот как я создаю изображение элемента и добавляю его в файл: < /p>
const headerImgData = await toPng(pageHeader as HTMLElement, {
cacheBust: true,
pixelRatio: 2,
});

pdf.addImage(headerImgData, 'PNG', xOffset, yOffset, imgWidth, imgHeight);
< /code>
При создании объекта PDF я использую 'px' в качестве единицы: < /p>
const pdf = new jsPDF({ orientation: 'p', unit: 'px', format: 'a4' });
< /code>
Фактическое изображение, отображаемое в файле, намного больше, чем ожидалось, то же самое относится и к смещениям. Я также пробовал другие подразделения и конвертировал, но та же проблема сохраняется.


Подробнее здесь: https://stackoverflow.com/questions/796 ... from-getbo