Question

我已经尝试了所有可能的组合，即获得一些看似简单易用的东西。

我需要在A4（210毫米（高）X 297毫米（宽））的页面上放置一个图像，并将该图像高度为100％，即297毫米，然后按比例拉伸宽度，然后裁剪溢出（即隐藏在css溢出中）。我已经尝试了$mpdf->Image()我能想到的每一种组合，或者就像我在PDF文件中的其他地方所做的那样，使用纯HTML和CSS。 E.g。

<img src="path(to/file.jpg" />

或

<div style="background: url("path(to/file.jpg") center center no-repeat;"></div>

再次，我能想到所有可能的CSS配置。

是否无法拉伸和成像以适应整个页面高度，同时保持纵横比并在侧面裁剪图像？

我在MPDF full page background上看过background-image-resize，但又一次，没有。

如何让图像达到页面高度的100％（如果我必须定义高度（即297毫米）或者它是否为百分比，我不在乎）图像按比例缩放，并在边缘裁剪任何多余的图像。

我确定我在这里错过了一些明显的东西。我无法理解我做错了什么（我想我现在已陷入困境）。

如果我在浏览器中进行回显和查看，那么显示正常（如预期）的示例

$html = '<div style="
    background: url('.$imageSource.') center center no-repeat;
    position: absolute;
    overflow: hidden;
    height: 297mm;
    width: 100%;
    background-size: cover;
    top: 0;
    left: 0;
"></div>';

然而，对$pdf->WriteHTML( $html, 2 )然后$pdf->Output()做同样的事情，图像的高度为297毫米，但宽度是扭曲的（即它不会与高度成比例地伸展）。

以下是生成的PDF（带占位符图片）

这就是我想要实现的目标

因此得到的PDF得到了挤压＆＃34;。而不是将宽度按比例扩展到高度（297mm）。

PS。很抱歉缺少实际测试的代码。但是我尝试了很多不同的组合，我无法重现所有这些组合。

PPS。使用最新版本的mPDF。三天前从GitHub抓起来。

Answer 1

由于我在获取逻辑，CSS和数学方面遇到了很多问题，所以我认为我会与其他任何正在努力解决这个问题的人分享我最后的工作解决方案。从功能

开始

function image( $containerWidth, $containerHeight, $imageSource, $top, $left, $border ){
// Get image width
$imageWidth             = getimagesize( $imageSource )[0];
// Get image height
$imageHeight            = getimagesize( $imageSource )[1];
// Get image aspect ratio
$imageRatio             = $imageWidth / $imageHeight;
// Get container aspect ratio
$containerRatio         = $containerWidth / $containerHeight;
// Decide if image should increase in height or width
if( $imageRatio > $containerRatio ){
    $width                  = ( ( $imageRatio / $containerRatio ) * 100 );
}else{
    $width                  = ( ( $containerRatio / $imageRatio ) * 100 );
}
if( $border ){
    // $border array: 0 = thicknes in points, 1 = type (solid, dotted etc), 2 = color
    $border = 'border: '.$border[0].'pt '.$border[1].' '.$border[2].';';
}
return '<div style="position: absolute; top: '.$top.'mm; left: '.$left.'mm; width: '.$containerWidth.'mm; height: '.$containerHeight.'mm; overflow:hidden; margin:0;'.$border.'"><img src="'.$imageSource.'" style="width: '.$width.'%; margin: 0 -'.( ( $width - 100 ) / 2 ).'%;" /></div>';
}

然后是居中的整页图片

$image1                     = image( 210, 297, $imageSource[0], 0, 0, null );

或者两个图像在彼此的顶部，一个具有白色边框

$image2                     = image( 105, 148, $imageSource[1], 15, 15, null );
$image3                     = image( 105, 148, $imageSource[2], 133, 90, [ 10, 'solid', 'white' ] );

输出

// mPDF options array
$pdfOptions = array(
    'mode'              => 'utf-8',
    'format'                => 'A4',
    'img_dpi'               => 300,
    'dpi'                   => 300,
);
// Declare $pdf and set options
$pdf                    = new \Mpdf\Mpdf( $pdfOptions );
// Stylesheets
$style                  = file_get_contents( __DIR__ . '/path/to/stylesheet.css');
$pdf->WriteHTML( $style, 1 );
$pdf->WriteHTML( $image1, 2 );
$pdf->AddPage();
$pdf->WriteHTML( $image2, 2 );
$pdf->WriteHTML( $image3, 2 );
$pdf->Output();

mPDF图像覆盖裁剪页面并且没有失真

1 个答案: