Question

我花了太多时间在这上面，我无法找到一个好的21世纪解决方案。

我只需要生成带有背景图像的PDF名片，但MPDF不是很有帮助。

默认我有：

@page{
    sheet-size: 90mm 55mm;
    margin: 0;
}

我试图：

使用@page {background-size：100％; } doesn't work
使用@page {background-size：cover; } doesn't work
调整图像大小 - 即使我在'mm'中设置了正确的尺寸，它也会更小或更大，即使我将背景图像分辨率设置为与图像相同的值
将绝对定位div与背景图片
相同但使用img标记，使用src属性。

在最后一个选项中，我有一个非常奇怪的事情。它显示了整个图像，但在页面中的一个小矩形中，但甚至没有达到全高。

有没有人有想法，如何简单地将图片用作页面背景？

Answer 1

mPDF具有背景图像的自定义css属性：background-image-resize，自定义值为0-6：

0 - 没有调整大小（默认）
1 - 收缩适合w（保持纵横比）
2 - 缩小到适合h（保持纵横比）
3 - 收缩到适合w和/或h（保持纵横比）
4 - 调整大小w（保持宽高比）
5 - 调整大小以适应h（保持宽高比）
6 - 调整大小以适应w和h

所以你可能需要： body {background-image：url（something.png）;背景图像调整大小：6}

Taken from mPDF docs

Answer 2

如果其他人需要mPDF中的背景覆盖，并且没有帮助background-image-resize，它会在被浮动元素包裹时立即中断。由于css顺应性的消除，mPdf中通常需要浮动元素。这是一个更加强大的圆圈图像解决方案，模拟了bg-cover。

获取图片方向

function getImageOrientation(string $imgPath){

  list($imgWidth,$imgHeight) = getimagesize($imgPath);

  $aspectRatio = $imgWidth / $imgHeight;

  if($aspectRatio >= 1){
      return array('landscape',$imgWidth,$imgHeight,$aspectRatio);
  }else{
      return array('portrait',$imgWidth,$imgHeight,$aspectRatio);
  }

}

设置自己的属性以模拟背景遮挡

public static function returnCircledImage($imgPath, int $size){

    list($orientation,$imgWidth,$imgHeight, $aspectRatio) = getImageOrientation($imgPath);

    if($orientation == 'landscape'){
        $backgroundSize = 'auto 100%'; //fit height, keep aspect ratio
        $calculatedWidth = floor($size * $aspectRatio);
        $calculatedHeight = $size;

        //position center manually
        $dx = -floor(($calculatedWidth - $calculatedHeight) / 2);
        $dy = 0;
    }else{
        $backgroundSize = '100% auto'; //fit width, keep aspect ratio
        $calculatedWidth = $size;
        $calculatedHeight = floor($size * $aspectRatio);

        //position center manually
        $dx = 0;
        $dy = -floor(($calculatedHeight - $calculatedWidth) / 2);
    }

    return sprintf('

        <div class="%s" style="background-size: %s; background-position:%spx %spx; overflow:hidden; border-radius:100px; width:%spx; height:%spx; background-image: url(%s)"></div>

        ',
        $backgroundSize,
        $dx,
        $dy,
        $size,
        $size,
        $imgPath
    );
}

Answer 3

使用background-image-resolution属性的工作示例：

<body style="background-image: url('/absolute/path/to/image.jpg');
             background-position: top left;
             background-repeat: no-repeat;
             background-image-resize: 4;
             background-image-resolution: from-image;">

在发票上使用300DPI JPEG图片时效果很好。

如果您在CSS 中使用 style="..."标记和body{...}样式，则mpdf将忽略style="..."标记及其内容，因此图片将会没出现！

MPDF整页背景

3 个答案: