react native image resizer

React Native Изменение размера изображения

Предупреждение. Начиная с версии 3.0.0 эта библиотека была перенесена из react-native-image-resizer в @bam.tech/react-native-image-resizer

Настраивать

Реагировать на родной >= 0,61

Начиная с версии 3.0.0 этот пакет «из коробки» поддерживает новую архитектуру (Турбо-модуль). Он также имеет ретросовместимость со старым.

 yarn add @bam.tech/react-native-image-resizer
cd ios && pod install

Реагировать на родной <= 0,60

 yarn add [email protected]
cd ios && pod install

Андроид

Примечание. В последних версиях React Native во время сборки Gradle на Android может возникнуть ошибка ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ). Запустите cd android && ./gradlew clean чтобы исправить это.

Ручное связывание

Информация о ручной ссылке для Android: Ссылка

Пример использования

 import ImageResizer from '@bam.tech/react-native-image-resizer' ;

ImageResizer . createResizedImage (
  path ,
  maxWidth ,
  maxHeight ,
  compressFormat ,
  quality ,
  rotation ,
  outputPath
)
  . then ( ( response ) => {
    // response.uri is the URI of the new image that can now be displayed, uploaded...
    // response.path is the path of the new image
    // response.name is the name of the new image with the extension
    // response.size is the size of the new image
  } )
  . catch ( ( err ) => {
    // Oops, something went wrong. Check that the filename is correct and
    // inspect err to get more details.
  } ) ;

Пример приложения

Базовый пример приложения доступен в папке example . Он использует модуль для изменения размера фотографии из Фотопленки.

API

 createResizedImage (
  /**
   * uri parameter accepts`path` or `uri`.
   * This property has been tested with the output of @bam.tech/react-native-image-picker,
   * react-native-vision-camera, @react-native-camera-roll/camera-roll and http link
   **/
  uri ,
  maxWidth ,
  maxHeight ,
  compressFormat ,
  quality ,
  ( rotation = 0 ) ,
  outputPath ,
  ( keepMeta = false ) ,
  ( options = { } )
) ; // Returns a Promise

Промис разрешается с помощью объекта, содержащего: path , uri , name , size (байты), width (пиксели) и height нового файла. URI можно использовать непосредственно в качестве source компонента <Image> .

Вариант	Описание
путь	Путь к файлу изображения или строка изображения в кодировке Base64 с префиксом «data:image/imagetype», где imagetype — jpeg или png.
ширина	Ширина для изменения размера (более подробную информацию см mode )
высота	Высота для изменения размера (более подробную информацию см. mode )
сжиматьформат	Может быть в формате JPEG, PNG или WEBP (только для Android).
качество	Число от 0 до 100. Используется для сжатия JPEG.
вращение	Поворот изображения в градусах для Android. В iOS поворот ограничен (и округлен) кратным 90 градусам.
выходной путь	Путь к изображению с измененным размером. Если значение равно нулю, изображение с измененным размером будет храниться в папке кэша. Чтобы установить выходной путь, обязательно добавьте опцию вращения (если вращение не требуется, просто установите для нее значение 0).
держатьМета	Если true , будет предпринята попытка сохранить все метаданные файла/информацию exif, за исключением значения ориентации, поскольку при изменении размера также выполняется коррекция поворота исходного изображения. По умолчанию установлено значение false , что означает, что все метаданные потеряны. Примечание. Это true только для изображений JPEG , загружаемых из файловой системы (а не из Интернета).
options.mode	Аналогично ResizeMode Resize-native Image: либо contain (по умолчанию), cover , либо stretch . contain будет соответствовать изображению по width и height , сохраняя его соотношение. cover сохраняет соотношение сторон и гарантирует, что изображение будет не меньше width или height . stretch изменит размер изображения точно по width и height .
options.onlyScaleDown	Если true , изображение никогда не увеличится, а только уменьшится.

Ограничения

• Если вы используете @react-native-camera-roll/camera-roll с включенной новой архитектурой, эта библиотека не будет работать . Если вы попытаетесь отобразить изображение с помощью uri библиотеки с помощью <Image /> у вас возникнет следующая ошибка: No suitable image URL loader found for ph://... . Эта ошибка возникает из-за ReactNative ImageLoader , который мы сейчас используем. Помощь/пиар для решения этой проблемы приветствуются. До тех пор мы рекомендуем использовать react-native-image-picker .
• Ориентация EXIF ​​изображения корректно обрабатывается только на Android, но не на IOS #402.

О Баме

Мы — компания из 100 человек, разрабатывающая и проектирующая мультиплатформенные приложения с помощью React Native с использованием методологии Lean & Agile. Чтобы получить дополнительную информацию о решениях, которые соответствуют вашим потребностям, свяжитесь с нами по электронной почте или через контактную форму!

Мы всегда с удовольствием Вам ответим?