МПДФ на всю страницу фон

Я потратил слишком много времени на это и я не могу придумать хорошее решение 21 века.

просто мне нужно создать визитную карточку в формате PDF с фоновым изображением, но MPDF не очень полезен.

по умолчанию у меня было:

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

пробовал:

  • использовать @page{ background-size: 100%;} doesn't work
  • использовать @page{ background-size: cover;} doesn't work
  • изменение размера изображения-даже если я установил правильный размер в " мм " он будет меньше или больше, даже если я установлю фон-изображение-разрешение к тому же значению, что и изображение.
  • место абсолютное расположенный div С фоновое изображение
  • то же самое, но с img теги, используя
11
mpdf

3 ответов

mPDF имеет пользовательское свойство css для фоновых изображений: background-image-resize с пользовательскими значениями от 0-6:

  • 0 - без изменения размера (по умолчанию)
  • 1-Shrink-to-fit w (сохранить соотношение сторон)
  • 2-Shrink-to-fit h (сохранить соотношение сторон)
  • 3-Shrink-to-fit w and / or h (сохранить соотношение сторон)
  • 4-Resize-to-fit w (сохранить соотношение сторон)
  • 5-Resize-to-fit h (сохранить соотношение сторон)
  • 6-изменение размера по размеру w и h

Так что вам, вероятно, нужно: тело {background-image: url (something.png); фон-изображение-изменение размера: 6}

взято из mPDF docs

25

в случае, если кому-то еще нужна фоновая обложка в mPDF и не помогает изменение размера фонового изображения, которое ломается, как только оно обернуто плавающим элементом. Плавающие элементы часто необходимы в mPdf из-за отсутствия соответствия css. Вот более надежное решение для обведенного изображения с имитацией BG-обложки.

ориентация вам изображения

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

он отлично работает с изображением JPEG 300DPI на счетах-фактурах.

если вы используете и style="..." тег и body{...} стиль в CSS, mpdf будет игнорировать style="..." тег и его содержимое, поэтому изображение не появится!

2