如何提高从 PDF 生成的图像的质量？答案

【问题标题】：How can I enhance the quality of images generated from PDF?如何提高从 PDF 生成的图像的质量？
【发布时间】：2020-02-11 12:01:00
【问题描述】：

我们使用TYPO3 9.5.13、GraphicsMagick 1.3.29、Ghostscript 9.27、BK2K\\BootstrapPackage 11.0.1

将 PDF 用作普通图像没有问题。
但现在我想要一个完整列宽（~1000px）的 PDF 的“预览”。尽管 PDF 具有高分辨率，但生成的图像宽度仅为 595 像素，几乎无法读取任何文本。

问题出现在 Image-CE 中，例如上传 CE，我想对其进行增强：
每次我想要使用完整列宽的图像时，它都会以糟糕的分辨率呈现，并且图像似乎失真。

这里是生成图像的一小块区域：

和 PDF 阅读器中显示的 PDF 中的相同区域：

流体部分：

<img loading="lazy" 
     src="{f:uri.image(image: file, cropVariant: 'default', maxWidth: 1100)}" 
     width="{bk2k:lastImageInfo(property: 'width')}" 
     height="{bk2k:lastImageInfo(property: 'height')}" 
     intrinsicsize="{bk2k:lastImageInfo(property: 'width')}x{bk2k:lastImageInfo(property: 'height')}" 
     title="{file.properties.title}" 
     alt="{file.properties.alternative}">

结果如下：

<img loading="lazy" 
     src="/fileadmin/_processed_/3/2/csm_Warum_D-Arzt_6afd8ad8d4.png"
     intrinsicsize="595x842" 
     title="" 
     alt="" 
     width="595" 
     height="842">

编辑：

如果使用此 FLUID：

<img loading="lazy" 
     src="{f:uri.image(image: file, cropVariant: 'default', width: 1100)}" 
     width="{bk2k:lastImageInfo(property: 'width')}" 
     height="{bk2k:lastImageInfo(property: 'height')}" 
     intrinsicsize="{bk2k:lastImageInfo(property: 'width')}x{bk2k:lastImageInfo(property: 'height')}" 
     title="{file.properties.title}" 
     alt="{file.properties.alternative}">

我明白了：

<img loading="lazy" 
     src="/fileadmin/_processed_/3/2/csm_Warum_D-Arzt_2ffb63b15f.png" 
     intrinsicsize="1100x1557" 
     title="" 
     alt="" 
     width="1100" 
     height="1557">

图像更大（并且溢出容器）但质量更差，请注意更大的像素：

【问题讨论】：

595？这听起来有点像在常量中定义了一个 maxwidth？
您使用的是标准 CE 吗？ TS 设置中有一个 maxGalleryWidth=600。 595px 听起来有点像这些 600px 减去一些填充/边框/...
我使用 bootstrapPackage 中的 CE。我找不到任何设置 maxGalleryWidth 或任何值 595 或 600（颜色定义除外）。
我不知道引导程序包，所以我不能说，如果这是特定于该分机的东西。您可以在 TypoScript 对象浏览器中分析所有常量（选择模板模块，然后在上方下拉列表中选择 TypoScript 对象浏览器）。你会得到一个包含所有生效常量的列表。例如在 styles.content.textmedia 下设置的东西？另一种可能性：由于PDF没有像真实图像那样的图像尺寸，请尝试将maxWidth替换为宽度。
另一个想法：我在使用GIFBUILDER时遇到了类似的奇怪质量问题。解决方案是设置 ['GFX']['gdlib_png'] => true。如果在转换图像时没有此设置，它会被转换为 GIF（=质量差的图像）。

标签： pdf typo3 ghostscript graphicsmagick typo3-9.x

【解决方案1】：

实际上，PDF 不是图像。它是一种容器格式，可以包含具有不同色彩空间和尺寸的矢量和图像。位图图像具有固定的尺寸宽度、高度、密度，而 PDF 则没有。最初，它是为打印机而不是屏幕而创建和优化的。

TYPO3 在后端通过一条消息反映了这一点：

恕我直言，没有完美的方法来处理 PDF 以表现得像图像，因为您知道输出格式，但不知道输入格式（正确）。获得可接受结果的两种方法：

扩展内容元素或创建新元素并为 PDF 预览图像添加第二个图像槽。使用图形程序自己创建预览图像。
编写您自己的视图助手并创建您自己的缩略图

解决方案 1 将为编辑带来更多工作。对我来说不是最佳实践。

我会使用自己的 viewhelper。

为 PDF 添加您自己的渲染类型：

<f:switch expression="{file.type}">
  <f:case value="5">
    <f:render partial="Media/Type/Pdf" arguments="{file: file, dimensions: dimensions, data: data, settings: settings}" />
  </f:case>
  <f:defaultCase>
    <f:render partial="Media/Type/Image" arguments="{file: file, dimensions: dimensions, data: data, settings: settings}" />
  </f:defaultCase>
</f:switch>

部分媒体/类型/Pdf

{namespace cv=Conversion\HelperUtils\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
  <cv:forEachPdfThumbnail document="{file}" pages="1" as="pdfPreviewPage">
    <f:image src="{pdfPreviewPage}" alt="" />
  </cv:forEachPdfThumbnail>
</html>

ViewHelper：

此视图助手使用 CommandUtility::imageMagickCommand 从 PDF 转换多个页面。您可以将密度提高到更高的值以提高质量。如前所述，这个 viewhelper 是几年前开发的，可以改进（例如，保存到 fileadmin/processed 而不是typo3temp。随意克隆和改进：https://github.com/conversion1/t3-pdfthumbnailviewhelper/blob/master/ForEachPdfThumbnailViewHelper.php

public static function renderStatic(array $arguments, \Closure $renderChildrenClosure, RenderingContextInterface $renderingContext)
{

    $templateVariableContainer = $renderingContext->getVariableProvider();

    /** @var \TYPO3\CMS\Core\Resource\FileReference $document */
    $document = $arguments['document'];
    $pages = explode(',', str_replace(' ', '', $arguments['pages']));

    $colorspace = TRUE === isset($GLOBALS['TYPO3_CONF_VARS']['GFX']['colorspace']) ? $GLOBALS['TYPO3_CONF_VARS']['GFX']['colorspace'] : 'RGB';
    $absFilePath = GeneralUtility::getFileAbsFileName($document->getOriginalFile()->getPublicUrl());
    $destinationPath = 'typo3temp/';
    $destinationFilePrefix = 'pdf-prev_' . $document->getOriginalFile()->getNameWithoutExtension();
    $destinationFileExtension = 'png';

    $output = '';

    foreach ($pages as $pageNumber) {

        if($pageNumber > 0) {
            $pageNumber = intval($pageNumber);
        } else {
            $pageNumber = 1;
        }

        $destinationFileSuffix =  '_page-' . $pageNumber;
        $absDestinationFilePath = GeneralUtility::getFileAbsFileName($destinationPath . $destinationFilePrefix . $destinationFileSuffix . '.' . $destinationFileExtension);

        $imgArguments = '-colorspace ' . $colorspace;
        $imgArguments .= ' -density 300';
        $imgArguments .= ' -sharpen 0x.6';
        $imgArguments .= ' "' . $absFilePath . '"';
        $imgArguments .= '['. intval($pageNumber - 1) .']';
        $imgArguments .= ' "' . $absDestinationFilePath . '"';

        if(!file_exists($absDestinationFilePath)) {
            $command = CommandUtility::imageMagickCommand('convert', $imgArguments);
            CommandUtility::exec($command);
        }

        $thumbnail = substr($absDestinationFilePath, strlen(Environment::getPublicPath()));
        $templateVariableContainer->add($arguments['as'], $thumbnail);
        $output .= $renderChildrenClosure();
        $templateVariableContainer->remove($arguments['as']);

    }

    return $output;
}

编辑：

第三种方法：您可以使用 JavaScript 库即时生成缩略图。例如。 https://github.com/mozilla/pdf.js

【讨论】：