首页 文章

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

提问于
浏览 次
1

我已经尝试了所有可以想象的组合，获得看似简单易用的东西 .

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

<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() ，图像的高度为297mm，但宽度是扭曲的（即它不会与高度成比例地拉伸） .

这是生成的PDF（带占位符图像）
enter image description here

这就是我想要实现的目标
enter image description here

因此得到的PDF被“挤压” . 而不是将宽度按比例延伸到高度（297mm） .

PS. 很抱歉缺少实际测试的代码 . 但是有很多不同的组合我会重现所有这些组合 .

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

html css mpdf

1 回答

  • 0

    由于我在获取逻辑，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();
    回复于

相关问题