web-dev-qa-db-ja.com

MPDF全ページの背景

私はこれにあまりにも多くの時間を費やし、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を画像と同じ値に設定しても、サイズは小さくなったり大きくなったりします。
  • 場所絶対背景画像でdivに配置
  • 同じですが、img属性を使用して、srcタグを使用します。

最後の選択肢として、私は本当に奇妙なものを持っています。画像全体が表示されましたが、ページ内の小さな長方形で表示されていましたが、高さ全体では表示されていませんでした。

画像をページの背景として使用する方法を知っている人はいますか？

mpdf
14
seniorpreacher

mPDFには、背景画像用のカスタムcssプロパティがあります：background-image-resize with custom values from 0-6：

  • 0-サイズ変更なし（デフォルト）
  • 1-シュリンクツーフィットw（アスペクト比を維持）
  • 2-縮み合わせh（アスペクト比を維持）
  • 3-縮み合わせwおよび/またはh（アスペクト比を維持）
  • 4-フィットに合わせてサイズ変更w（アスペクト比を維持）
  • 5-サイズを合わせてh（アスペクト比を維持）
  • 6-サイズを変更してwとhに合わせる

したがって、おそらく次のものが必要です。body{background-image：url（something.png）; background-image-resize：6}

mPDFドキュメントから取得

33
Kiko

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

請求書の300DPIJPEG画像で正常に機能します。

CSSのstyle="..."タグとbody{...}スタイルの両方を使用する場合、mpdfはstyle="..."タグとそのコンテンツを無視するため、画像は表示されません。

2
Meloman

他の誰かがmPDFのbackground-coverを必要とし、background-image-resizeの助けがない場合は、float要素でラップされるとすぐに壊れます。 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
    );
}
2
Rob Derks