如何在运行时为116*116的PNG默认图片动态添加数据库读取的名称文本

这个需求完全可以实现，优先推荐CSS文本叠加方案，无需修改图片资源，开发成本最低，也能完全达到你要的展示效果。如果有生成带文字的实体图片的需求，再选择Canvas/后端生成方案即可。

方案1：CSS叠加实现（推荐） #

仅需调整现有DOM结构和CSS样式即可实现文字悬浮在图片上的效果，性能最优，后续修改样式也更灵活。你可以修改你的代码如下：

<div class="card-block" id="appSearch">
    <div class="row" id="NONdraggablePanelList">
        @foreach (var app in Applications)
        {
            <div data-target="#requestAccessForm" id="@app.Id" @onclick="@(e => GetAppRolesDetails(app.Id))" data-toggle="modal" style="cursor: pointer" class="col-lg-12 col-xl-2" data-role="apps">
                <div class="card-sub" style="text-align: center">
                    <!-- 给外层容器加相对定位 -->
                    <span class="btn tts tts-slideOut" aria-label=@app.Description style="position:relative;display:inline-block;padding:0;">
                        <img class="card-img-top img-fluid" src="./_content/Skclusive.Dashboard.App.View/images/AppImg/Default3.png" alt="Card image cap" style="display:block;">
                        <!-- 新增绝对定位的文字层，位置可以根据需要调整top/bottom/left/right参数 -->
                        <span style="position:absolute;bottom:12px;left:0;right:0;margin:auto;color:#fff;font-weight:bold;font-size:14px;">@app.Name</span>
                    </span>
                    <a href="https://hey.co.uk:44301/IADJ">
                        <div class="card-block">
                            <h5 hidden="hidden" class="card-title">@app.Name</h5>
                            <b>@app.Name</b>
                            <br/>
                        </div>
                    </a>
                </div>
            </div>
        }
    </div>
</div>

你可以根据实际展示效果调整文字的大小、颜色、位置等样式参数。

方案2：Canvas生成带文字的实体图片 #

如果你的场景需要实际生成包含文字的PNG图片（比如需要下载、分享带文字的图片），可以用前端Canvas动态生成，实现逻辑如下：

• 预加载116*116的默认PNG图片资源
• 渲染每个应用时创建尺寸为116*116的Canvas画布
• 先调用drawImage方法把默认图片绘制到Canvas上，再调用fillText方法把app.Name绘制到指定位置
• 最后调用toDataURL()方法把Canvas内容转成Base64地址，赋值给img标签的src属性即可

如果只是页面展示使用，直接选择方案1即可，不需要额外处理图片生成逻辑。

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