Fond de page complet MPDF

J'ai passé beaucoup trop de temps sur ce sujet et je ne peux pas comprendre une bonne 21ème siècle solution.

Simplement, j'ai pour générer une carte de visite en PDF, avec un image de fond, mais MPDF n'est pas très utile.

Par défaut que j'avais:

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

J'ai essayé de:

  • utiliser @page{ background-size: 100%; } doesn't work
  • utiliser @page{ background-size: cover; } doesn't work
  • redimensionner l'image - même si je l'ai mis à la bonne taille en "mm", elle sera plus petite ou plus grande, même si j'ai mis le background-image-résolution à la même valeur que l'image.
  • place absolue positionné div avec l'image de fond
  • même mais avec img des balises, à l'aide de src attribut.

À la dernière option, j'ai vraiment une chose étrange. Elle a montré que l'ensemble de l'image, mais dans un petit rectangle dans les pages, mais pas encore en pleine hauteur.

Quelqu'un a une idée, comment simplement utiliser une image comme fond de page?

source d'informationauteur seniorpreacher

  1. 23

    mPDF a une coutume propriété css pour les images d'arrière-plan: background-image-redimensionner avec des valeurs personnalisées à partir de 0 à 6 ans:

    • 0 - Pas de redimensionnement (par défaut)
    • 1 - Shrink-to-fit w (conserver les proportions)
    • 2 - Shrink-to-fit h (conserver les proportions)
    • 3 - Shrink-to-fit w et/ou h (conserver les proportions)
    • 4 - Redimensionner-à-fit w (conserver les proportions)
    • 5 - Redimensionner la forme h (conserver les proportions)
    • 6 - Redimensionner-à-fit w et h

    Donc, vous avez probablement besoin de:
    body {background-image:url(quelque chose.png); background-image-redimensionner:6}

    Prises de mPDF docs

  2. 2

    Au cas où quelqu'un d'autre a besoin d'un arrière-plan de couverture en mPDF et n'est pas aidé par le fond-image-redimensionner, qui se brise dès qu'il est enveloppé par une flottait élément. Flottait éléments sont souvent nécessaires dans mPdf en raison de l'abscence de css de la conformité. Voici une solution plus robuste pour un encerclé de l'image, avec bg-couverture simulé.

    Obtenir de l'orientation des images

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

    }

    Ensemble de propriétés propres à simuler fond-couverture

    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. 2

    Exemple de travail avec le background-image-resolution propriété :

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

    Il fonctionne très bien avec une image JPEG 300DPI sur les factures.

    si vous utilisez à la fois la style="..." tag et un body{...} de style en CSSmpdf ignore la style="..." balise et son contenu, de sorte que l'image n'apparaîtra pas!