Question

我有一个需要将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;

当我最初使用html2canvas函数时，我尝试使用scale：2，我尝试使用imageSmoothingEnabled = false，正如您在代码中看到的那样，并且尝试使用答案in here（这使所有内容更加模糊）< / p>

如何避免新图像的质量损失？

分割图像时HTML2Canvas drawImage质量下降

0 个答案: