React Native - 像素密度下的图片大小？

Question

当用户上传头像时，我会在服务器上将其调整为 100px x 100px 的大小。我希望显示出这个确切的尺寸，并且无论使用何种设备访问，图像都应该保持清晰，不会模糊。但是我知道苹果公司有2x和3x的像素密度大小，我不确定它是否会使我的图像变得模糊。

因此，由于我目前没有不同的设备来进行测试，我是否需要将图像调整为3种大小以避免任何模糊，并根据像素密度选择适当的大小？例如：

100px x 100px
200px x 200px
300px x 300px

如果是这样，那将会很麻烦，因为未来可能会有额外的像素密度未被考虑。或者100px x 100px的大小是否足够，并且无论设备像素密度如何都能看起来锐利？

- Wonka

---

好问题，我也想知道答案。 - Fantasim

Answer 1

React Native中有两种单位，逻辑尺寸和物理尺寸。逻辑尺寸用于布局，例如在样式中使用。物理尺寸用于图像大小调整。

如果您使用Dimensions和PixelRatio这两个API，您可以获取当前运行您的应用的设备的物理宽度，例如：

var { logicalWidth } = Dimensions.get('window');
var physicalWidth = logicalWidth * PixelRatio.get();

显然，如果你希望一个100像素宽的图片在现代手机上被拉伸到整个显示屏幕的宽度（例如Nexus 6的1440像素宽度），那么它不会看起来很好。考虑到今天手机的dpi范围，我建议您在服务器上为同一张图片生成多个版本，根据预先选择的各种像素比率，并仅加载每个设备需要的图片，即在图片URL中传递设备的像素比率并在服务器端进行解释。

- hasseio

---

嗯...谢谢hasseio - 但是如果我有3种不同的应用定义大小的头像/任何上传的图片，而不仅仅是一个100像素乘100像素，用于不同的场景位置，这意味着我需要在服务器上存储9份副本，每个像素密度3个（只考虑2x和3x）。如果以后还有4x，我就必须重新打开原始文件，将其另存为4x，这样会产生12份不同尺寸图片的副本（乘以2、3和4）。如果这是唯一的解决办法，那么这真糟糕。我将保持问题开放几天，也许有人可以提供更多信息/不同的解决方案 :) - Wonka

我所看到的唯一另一种方法是强制用户上传矢量格式头像，即SVG。可能不是一个好的选择 :) 最终，像素就是像素。如果你没有足够的像素，你必须插值，这会导致模糊。看看谷歌的材料图标库。每个图标都有不同的“应用程序大小”，每个大小都有5个不同的分辨率表示。我认为如果有更好/不同的解决方案，谷歌会使用它的 :) - hasseio

Answer 2

我认为在像素密度高的设备上，您的图像不会模糊。 但是，如果有人上传一个20x20像素大小的头像，并将其拉伸到100x100，它将非常模糊。

- Thomas Simonsen Strømmen