ユーザーがアバターをアップロードすると、サーバーの100px x 100pxにサイズ変更されます。React Native - ピクセル密度の画像サイズ？
私はそれにアクセスしているデバイスに関係なく、鮮明であるようにイメージをシャープに表示したいと思いますが、appleは2倍と3倍のサイズを持っています。私のイメージをぼかすかどうか
私は現時点でこれをテストするためのデバイスがないので、ぼやけを避けるためにイメージを3サイズにリサイズし、ピクセル密度に基づいて適切なイメージを提供する必要がありますか？以下のような：行方不明将来的に追加の密度があるかもしれないよう
100px x 100px
200px x 200px
300px x 300px
もしそうなら、それは、痛みになります。または、デバイスのピクセル密度に関係なく、100px x 100pxだけで十分です。
反応ネイティブには2組のユニットがあります。論理次元、および物理次元。論理次元は、レイアウト、つまりスタイル内で使用されます。画像のサイジングには物理的な寸法が使用されます。
2つのAPIのDimensionsとPixelRatioを使用すると、アプリが現在実行しているデバイスの物理的な幅を取得できます。何かのようなもの;
var { logicalWidth } = Dimensions.get('window');
var physicalWidth = logicalWidth * PixelRatio.get();
あなたは画像がディスプレイの幅全体にわたって延伸されることを期待している場合は明らかに100pxに広い画像は（ネクサス6の幅は1440px）で、現代の携帯電話に見栄えのするつもりはありません。今日の携帯電話ではdpiの範囲が与えられていますが、私はあなたが前もって選択したさまざまなピクセル比率に従って、同じイメージの複数のバージョンを生成し、各デバイスに必要なイメージだけをロードします。 image urlを実行し、サーバーのバックエンドで解釈します。
hmmm ...ありがとうございます - しかし、私は3つの異なるアプリケーションの定義されたサイズのアバター/任意のアップロードされた画像、100pxで100pxだけではなく、つまり、サーバー上に9つのコピーが必要になります。各ピクセルの密度は3です（2倍と3倍のみ）。後で4倍の場合は元のファイルを再度開いて4倍で保存し、3種類のサイズ（2,3,4倍）の画像をそれぞれ12枚ずつ作成する必要があります。それが唯一の方法ならば、これは吸う。私は数日間、質問を開いたままにしておきます。多分もっと多くの情報/別の解決策でチャイムします:) – Wonka
私が見る唯一の他の方法は、ユーザーにベクトル形式のアバターすなわちsvgをアップロードさせることです。おそらく良い動きではありません:)最後に、ピクセルはピクセルです。十分でない場合は、補間しなければならず、ぼかしが発生します。 Googleのマテリアルアイコンライブラリをご覧ください。各アイコンには異なる「アプリケーションサイズ」があり、各サイズには5種類の解像度表現があります。私は良い/異なるソリューションがあったと思う、Googleはそれを使用していた:) – hasseio
ピクセル密度の高いデバイスでは、画像がぼやけることはありません。 しかし、誰かが20x20ピクセルの大きさのアバターをアップロードし、それを100x100に伸ばすと非常にぼやけてしまいます。
良い質問 – Fantasim