TYPO3 cropVariants裁剪y坐标异常导致Fluid渲染图片缺失1px问题问询

问题原因 #

这是TYPO3后端图片裁剪工具的浮点计算精度误差导致的：存储的y坐标-0.002是极小的运算偏差，乘以原图500px高度后，计算得出的可渲染高度为 500 * (1 - abs(-0.002)) = 499px，最终导致高度缺失1px。

修复方案 #

方案1：添加DataHandler钩子修正存储前的裁剪数据（最优，永久生效） #

在自定义扩展中注册processDatamap_preProcessFieldArray钩子，在sys_file_reference的裁剪数据存入数据库前自动修正偏差值：
首先在扩展的ext_localconf.php中注册钩子：

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['TYPO3\CMS\Core\DataHandling\DataHandler']['processDatamap_preProcessFieldArray'][]
    = \Vendor\YourExtension\Hooks\CropAreaCorrectionHook::class;

对应钩子类实现代码：

<?php
namespace Vendor\YourExtension\Hooks;

use TYPO3\CMS\Core\DataHandling\DataHandler;

class CropAreaCorrectionHook
{
    public function processDatamap_preProcessFieldArray(
        array &$fieldArray,
        string $table,
        string $id,
        DataHandler $dataHandler
    ): void {
        if ($table !== 'sys_file_reference' || !isset($fieldArray['crop'])) {
            return;
        }
        $cropData = json_decode($fieldArray['crop'], true) ?: [];
        foreach ($cropData as &$variant) {
            if (isset($variant['cropArea'])) {
                // 修正坐标的极小偏差
                foreach (['x', 'y'] as $coord) {
                    if (abs($variant['cropArea'][$coord]) < 0.001) {
                        $variant['cropArea'][$coord] = 0.0;
                    }
                }
                // 修正宽高的极小偏差
                foreach (['width', 'height'] as $dim) {
                    if (abs(1 - $variant['cropArea'][$dim]) < 0.001) {
                        $variant['cropArea'][$dim] = 1.0;
                    }
                }
            }
        }
        $fieldArray['crop'] = json_encode($cropData);
    }
}

替换代码中的命名空间为你自己扩展的命名空间即可生效。

方案2：Fluid渲染时强制指定尺寸（临时快速修复） #

在f:image标签中强制指定宽高，添加后缀c表示强制裁剪到对应尺寸，抵消偏差影响：

<f:image 
    src="{item.image.0.reference.uid}" 
    alt="{item.image.0.reference.description}" 
    treatIdAsReference="1"
    width="500c"
    height="500c"
/>

方案3：升级TYPO3核心版本 #

该浮点精度问题已在TYPO3 11.5.20、12.4.0及以上版本被官方修复，如果你的站点核心版本较低，升级到对应以上版本即可直接解决问题。

内容的提问来源于stack exchange，提问作者N1ck