Полностраничный фон MPDF

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

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

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

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

Я попытался:

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

При последнем варианте у меня действительно странная вещь. Он показал изображение целиком, но в маленьком прямоугольнике на страницах, но даже не на высоте.

Есть ли у кого-нибудь идея, как просто использовать изображение в качестве фона страницы?

Ответы

Ответ 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}

Взято из документов mPDF

Ответ 2

В случае, если кому-то еще нужна фоновая обложка в mPDF и ей не помогает изменение размера фона, которое прерывается, как только оно завершается плавающим элементом. Платные элементы часто необходимы в mPdf из-за отсутствия соблюдения css. Вот более надежное решение для обведенного изображения с использованием 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
    );
}

Ответ 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 на счетах.

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