mPDF 将正方形图像变成圆形

Question

在 mPDF 中是否可以将图像设为圆圈？找遍了也没有找到明确的答案。

对我来说这张图片显示很好，只是它是一个正方形，而这应该是一个圆形。

css

img{
    width: 150px;
    height: 150px;
    border-radius: 150px;
}

php

$inputPath = '../web_content/cool_cat.jpg';
<div class="profile_img">
    <img src="'.$inputPath.'"/>
</div>

Answer 1

IMG 元素不支持边框半径。

参见 mPDF 手册中的 Supported CSS。

不幸的是，即使将图像放入支持 border-radius 元素的 div 中也无法伪造。

<div style="width: 150px;
    height: 150px;
    border-radius: 150px; 
    border: 2px solid maroon; 
    overflow: hidden;">
        <img src="assets/butterfly_ProPhoto.png" />
</div>

Answer 2

通过将图像用作背景图像而不是元素找到了解决此问题的方法。

所以在使用 mpdf 创建 pdf 的 PHP 文件中，我刚刚制作了一个 div 可以将图像路径作为 $inputPath。现在似乎工作正常。

HTML / PHP

<div class="profile_img" style="background-image: url('.$inputPath.');"></div>

CSS

.profile_img {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 120px;
    border-style: solid;
    border-color: white;
    border-width: medium;

    overflow: hidden;

    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
 }

mPDF 将正方形图像变成圆形

mPDF turning square image into a circle

php

html

css

mpdf