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

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

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

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

Answer 2

IMG 元素不支持边框半径。

请参阅 mPDF 手册中的支持的 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 3

@jjyj 的回答对我不起作用，所以我必须找到另一个解决方案。

首先，我尝试创建一个包含标签的。失败。

然后我想也许直接用 PHP 创建图像会更容易。失败。

然后我发现了另一个不错的技巧，它并非在所有情况下都有效，但在我的情况下却非常有效。

解决方案：创建两个div，然后向上移动一个负边距。

<div><img src=image.png style="width:49mm;height:49mm;margin:0.5mm;"></div>
<div style="margin-top:-50mm;"><img src=mask.svg style="width:50mm;height:50mm;"></div>

之前：

合并：

如您所见，我使用了一个带有白色边框的蒙版，并对原始图像应用了一点边距，以便下图的边缘不会透过蒙版发光。

很明显蒙版是要用在白色背景上的——我添加了一个灰色背景来演示。