Как увеличить png файл без интерполяции в react-native+expo?

Question

[Новичок Иванович]

Есть qrcode в формате png размером 32*32 пикселя. при выводе в компоненте Image c увеличением картинка теряет качество. нужно увеличить картинку без потери качества.
как это сделать?

пример результата

Comments

[kr_ilya]

Никак. При увеличении хоть какими алгоритмами качество потеряется

[Новичок Иванович]

Energy2, в примере сделали нормально но в обычной веб странице.

[posters]

Новичок Иванович, так а в чем проблема? Задайте картинке свойство image-rendering: pixelated;. Сами же пример приложили...
Альтернативный вариант, это генерировать qrcode большего размера.

[Новичок Иванович]

posters, в react-native такое есть в компоненте Image?

[posters]

Новичок Иванович, не обратил внимание на теги

[Новичок Иванович]

posters, какие есть предложения по увеличению размера картинки?

Answer 1

[PrAw]

увеличивайте разрешение ровно в 2(*2*2*2...) раза, это позволит избежать искажений из-за перехода цвета на границах пикселей.
Ну и как posters сказал, "Задайте картинке свойство image-rendering: pixelated;"
UPD:
https://facebook.github.io/react-native/docs/image.html
resizeMethod: 'resize'
Скорей всего этот режим при правильном разрешении (увеличиваем в степень двойки раз) даст лучшую картинку.

Comments

[Новичок Иванович]

image-rendering: pixelated нельзя задать в react-native

[PrAw]

Новичок Иванович, UPD Добавил

[Новичок Иванович]

такого там нет. только увеличение с масштабированием. нужно увеличить попиксельно.

[PrAw]

Новичок Иванович, ну, либо софтовым алгоритмом увеличиваем размер, либо аппаратно видеокарточке позволяем. Скорей всего при софтовом границы будут резче. Возможно попробовать второй вариант.
докой на Image уже кинул, других опций там толком и нет.

[Новичок Иванович]

PrAw, а по пиксельно в курсе как сделать?

[PrAw]

Новичок Иванович, похоже только руками рисовать на канве
попробовал на основе кода из доки по Image, лучше всего увеличивается картинка, у которой изначально разрешение больше.

style={{width: 50, height: 50}} -- изначально 296х296 разрешение
source={require('@expo/snack-static/react-native-logo.png')}
/>
style={{width: 50, height: 50}} --изначально 64х64 разрешение
source={{uri: 'https://facebook.github.io/react-native/img/tiny_l...'}}
/>

[PrAw]

Новичок Иванович, https://facebook.github.io/react-native/docs/stylesheet
нет доступного стиля?

[Новичок Иванович]

PrAw, с помощью стилей картинку не увеличить.ошибка нет такого параметра imageRendering

[PrAw]

Новичок Иванович, тогда брать картинку побольше.
Еще вариант перехватывать отрисовку, но это надо глубоко в исходники лезть, чтобы понять, как именно.