首页 文章

MPDF整页背景

提问于
浏览 次
12

我花了太多时间在这上面，我无法找到一个好的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'中设置了正确的大小，它也会更小或更大，即使我将 background-image-resolution 设置为与图像相同的值 .

  • 将 absolute 定位 div 与背景图片

  • 相同但使用 img 标签，使用 src 属性 .

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

Does anyone have an idea, how to simply use an image as a page background?

mpdf

3 回答

  • 2

    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

    回复于
  • 28

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

    Get image orientation

    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);
  }

    }

    Set own properties to simulate background-cover

    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
    );
}
    回复于
  • 2

    使用 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 =“...”标签及其内容，因此图片不会出现！

    回复于

相关问题