我需要在我的应用程序中加载广告图片,这些通常是公司的徽标。
标志的特点是,虽然它们可以具有特定的高度,但其宽度会发生变化。
因此我从一个非常简单的解决方案开始,我在 Firebase 存储中上传了一个 90 x 20 的 png 图像,然后使用了简单的代码:
Image(uiImage: image)
这将渲染图像为 90 x 20。
遗漏的一些细节是我在后台发出网络请求来下载此图像,然后 - 我觉得这可能不相关,但可以根据需要添加代码。
问题是,在 iPhone 16(普通版和专业版)设备上,这些图像变得非常模糊。
所以我所做的是上传一个 3x 图像,但是之前的代码使图像大幅增大,因为现在图像尺寸为 270 x 60。
因此,为了以之前的尺寸渲染高质量的图像,我做了以下操作:
Image(uiImage: image)
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(height: 20)
// The width of the parent view hosting this had a max width of infinity
现在这个方法有效了,图像也更清晰了。在指定硬编码高度 20 时,我们遇到了一些公司徽标稍高的问题,因此我们制定了一条规则,即徽标的最大高度应为 28,因此:
- 如果我上传 90 x 20,图像高度将为 20
- 如果我上传 360 x 80,图像高度将是 28
我通过以下方式实现此目的:
Image(uiImage: image)
.resizable()
.renderingMode(.template)
.tint(Constants.Colors.logo)
.scaledToFit()
.frame(height: min(image.size.height, 28))
这适用于大多数用例,但是,如果我想让图像以 90 x 20 的尺寸呈现,但质量较高,并且我上传了 3x 270 x 60 的图像,它不会以 90 x 20 的尺寸呈现,而是以 126 x 28 的尺寸呈现,因为 28 是最大高度
虽然这可能是可以接受的,但一个好的方法是如何以原始尺寸渲染 2x 和 3x 图像,而不是使图像增长到最大高度 28。