Search code examples
imagedompdf

laravel dompdf does not make rounded image in pdf resume


I am trying to make rounded image in resume with dompdf. But I can't get 360 degree fully rounded image. How can I do it ? I write width 360%. But it does not work:(. Also I tried with pixels, but it did not work also


Solution

  • You're probably running into a bug present in dompdf 0.7.0 or earler. For now you'll have to manually specify the dimensions based on the size of the image. Just specify half the width/height (using the same unit space helps).

    Using a square image is fairly simple and something like the following should work:

    <img src="http://placehold.it/640x640" style="width: 150px; border-radius: 75px; border: 2px solid white;">
    

    Using a rectangular image is still possible, but requires more work. Until dompdf supports more background image attributes (like size and position) you would have to calculate the appropriate size to use for the image and radius. Using your example of a 640x480 image the following should work:

    <div style="position: relative; overflow: hidden; width: 150px; height: 150px; border: 2px solid white; border-radius: 75px;">
      <img src="http://placehold.it/640x480" style="position: absolute; width: 200px; left: -25px;">
    </div>
    

    Note that while browsers correctly avoid curve overlaps dompdf (in version 0.7.0 and earlier) does not. To ensure rendering of the border radius is consistent with browsers you will have to manually calculate the correct radius to avoid any overlaps.