如何在Laravel的Dompdf中为图片添加盒子阴影效果？

下面是几种适配Dompdf渲染特性的图片阴影实现方案，可根据场景选择：

方案一：嵌套Div模拟阴影 #

通过多层div叠加，用底层半透明背景模拟阴影，上层放置图片，纯HTML/CSS实现无需额外依赖：

<div style="width:80% ;margin-left:10%; height:380px; margin-top: 30px;">
    <!-- 阴影层：控制偏移、颜色和透明度 -->
    <div style="width:90%; height:90%; margin-left:5%; background:rgba(225,24,24,0.2); position:relative; top:10px; left:10px;"></div>
    <!-- 图片层：通过z-index压在阴影上方 -->
    <img class="mt-5" src="{{ public_path('img/' . $packgeupdate->header_img) }}" width="90%" height="90%" alt="Sample Image" style="margin-left:5%; object-fit:contain; position:relative; top:-342px; z-index:1;">
</div>

可调整阴影层的top/left控制偏移量，修改background参数调整阴影颜色和深浅

方案二：提前给图片添加阴影（PHP图片处理） #

用Laravel常用的Intervention Image库，在生成PDF前给图片批量添加阴影，直接使用带阴影的成品图：

1. 先安装依赖：

composer require intervention/image

2. 修改控制器逻辑，处理图片并传递新路径到视图：

public function downloadPdf(Request $request, $id)
{
    $packgeupdate = CreatePackage::where('id', $id)->first();
    
    // 处理图片添加阴影，缓存成品避免重复生成
    $originalImgPath = public_path('img/' . $packgeupdate->header_img);
    $shadowImgPath = public_path('img/shadow_' . $packgeupdate->header_img);
    
    if (!file_exists($shadowImgPath)) {
        $img = Image::make($originalImgPath);
        // 参数：模糊度、X偏移、Y偏移、阴影颜色（带透明度）
        $img->shadow(15, 10, 10, '#e1181880');
        $img->save($shadowImgPath);
    }
    
    // 替换为带阴影的图片路径
    $packgeupdate->header_img = 'shadow_' . $packgeupdate->header_img;

    // 以下数据查询逻辑保持不变
    $dataDays = dataDays::where('package_id', $packgeupdate->id)->get();
    $dataInclusions = dataInclusions::where('package_id', $packgeupdate->id)->get();
    $dataExclusions = dataExclusions::where('package_id', $packgeupdate->id)->get();
    $dataPaymentPolicys = dataPaymentPolicy::where('package_id', $packgeupdate->id)->get();
    $dataHotels = dataHotel::where('package_id', $packgeupdate->id)->get();
    $dataPackageCosts = dataPackageCost::where('package_id', $packgeupdate->id)->get();
    $dataNotes = dataNote::where('package_id', $packgeupdate->id)->get();

    $pdf = PDF::loadView('package.download-pdf', compact(
        'packgeupdate',
        'dataInclusions',
        'dataDays',
        'dataNotes',
        'dataExclusions',
        'dataPaymentPolicys',
        'dataHotels',
        'dataPackageCosts'
    ))
        ->setOption('isHtml5ParserEnabled', true)
        ->setOption('isPhpEnabled', true);

    return $pdf->stream($packgeupdate->package_name . '.pdf');
}

3. 视图中直接使用处理后的图片：

<div style="width:80% ;margin-left:10%; height:380px; margin-top: 30px;">
    <img class="mt-5" src="{{ public_path('img/' . $packgeupdate->header_img) }}" width="90%" height="90%" alt="Sample Image" style="margin-left:5%; object-fit:contain;">
</div>

方案三：用SVG包裹图片实现阴影 #

利用Dompdf支持SVG的特性，通过SVG滤镜实现接近CSS box-shadow的效果：

<div style="width:80% ;margin-left:10%; height:380px; margin-top: 30px;">
    <svg width="90%" height="90%" style="margin-left:5%;">
        <!-- 定义阴影滤镜 -->
        <defs>
            <filter id="imageShadow">
                <feDropShadow dx="10" dy="10" stdDeviation="15" flood-color="#e11818" flood-opacity="0.5"/>
            </filter>
        </defs>
        <!-- 嵌入图片并应用滤镜 -->
        <image xlink:href="{{ public_path('img/' . $packgeupdate->header_img) }}" width="100%" height="100%" filter="url(#imageShadow)" preserveAspectRatio="xMidYMid meet"/>
    </svg>
</div>

可调整feDropShadow的dx/dy控制偏移，stdDeviation控制模糊度，flood-color/flood-opacity控制阴影颜色和透明度

内容的提问来源于stack exchange，提问作者Rabees Waheed