主页 / coding / 问题 / 79543044
Accepted
Shawn Frank
Asked: 2025-03-29 17:30:00 +0800 CST

如何通过 SwiftUI Image 中的 URL 渲染 @2x 和 @3x 图像

  • 772

我需要在我的应用程序中加载广告图片，这些通常是公司的徽标。

标志的特点是，虽然它们可以具有特定的高度，但其宽度会发生变化。

因此我从一个非常简单的解决方案开始，我在 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，因此：

  1. 如果我上传 90 x 20，图像高度将为 20
  2. 如果我上传 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。

1 个回答

  1. Best Answer

    您应该UIImage使用创建init(data:scale:)。此初始化程序允许您指定比例，并且在显示时它将相应地缩放。

    或者，CGDataProvider使用您获得的创建一个，然后从中Data创建一个（例如，png 的初始化程序）。这允许您访问宽度和高度（以像素为单位），您可以使用它们来计算比例。最后，使用创建一个 SwiftUI ，传入和比例。是为了可访问性。CGImageCGImageImageinit(_:scale:orientation:label:)CGImagelabel

    • 1

相关问题