Html2Canvas drawImage потеря качества при разбиении изображения - PullRequest
Новая
       35

Html2Canvas drawImage потеря качества при разбиении изображения

1 голос
/ 02 июля 2019

У меня есть функция, которая должна экспортировать html-страницу в pdf, и я пытаюсь добиться этого, используя pdfmake и html2canvas. Проблема, с которой я столкнулся, заключается в том, что когда изображение слишком велико, чтобы уместиться на одной странице, оно перемещается на другую, оставляя много пустого пространства. Поэтому я использую функцию для разделения изображения на несколько, если исходное изображение слишком большое.

Проблема в том, что когда я разделяю изображение, и только потом, например, на два отдельных, оба новых очень размытые, и из них ничего не понятно, даже если они правильно расположены в созданном PDF. И эта проблема возникает, только когда я разделяю изображение, а не когда все умещается на одной странице (поэтому не вызывается drawImage).

Вот функция, которую я использую для разделения: 

function splitImage(img, content, callback, selectedFilter, currentTime, currentReference, fileName) {
      return function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        const printHeight = (img.height * currentReference.PAGE_WIDTH) / img.width;

        canvas.width = currentReference.PAGE_WIDTH;

        for (let pages = 0; printHeight > pages * currentReference.PAGE_HEIGHT; pages++) {
          /* Don't use full height for the last image */
          canvas.height = Math.min(currentReference.PAGE_HEIGHT, printHeight - pages * currentReference.PAGE_HEIGHT);
          ctx.drawImage(
            img,
            0,
            Math.round(-pages * currentReference.PAGE_HEIGHT),
            Math.round(currentReference.PAGE_WIDTH),
            Math.round(printHeight)
          );
          content.push({
            image: canvas.toDataURL(),
            margin: [0, 5],
            width: currentReference.PAGE_WIDTH
          });
        }
        currentReference.downloadPdf(selectedFilter, currentTime, currentReference, fileName, content);
        callback();
      };
    }

Начальная ширина и высота для img, который я использую, следующие: 

img.height
2691
img.width
1532

, а параметры PAGE_WIDTH и PAGE_HEIGHT имеют следующие значения 

public PAGE_HEIGHT = 705;
public PAGE_WIDTH = 550;

Я попытался использовать scale: 2, когда я первоначально использовал функцию html2canvas, я попытался использовать imageSmoothingEnabled = false, как вы можете видеть в коде, и я попытался использовать ответ здесь (что сделало все еще больше размыто)

Как можно избежать потери качества новых изображений?

...