mPDF将方形图像变成圆形

Posted 2023-05-07

【中文标题】mPDF将方形图像变成圆形

【英文标题】：mPDF turning square image into a circle

【发布时间】：2017-07-12 18:57:51

【问题描述】：

在 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>

【问题讨论】：

border-radius 可能在 PDF 中不受支持。我用 TCPDF 和剪贴蒙版做到了这一点，例如 tcpdf.org/examples/example_034

尝试对你的类定义使用内联样式而不是外部文件

我不确定我是否收到了您的请求 :) 但也许这会有所帮助：bennettfeely.com/clippy

【参考方案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; 
 

【参考方案2】：

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>