React Native Image Resizer
A React Native module that can create scaled versions of local images (also supports the assets library on iOS).
| react-native | react-native-image-resizer |
|---|---|
| ≤ 0.60 | 1.1.0 |
| 0.61 | 1.2.0 |
Setup
Install the package:
- React Native >= 0.60
yarn add react-native-image-resizer
cd ios && pod install
- React Native <= 0.59
yarn add react-native-image-resizer
react-native link react-native-image-resizer
Android
Note: on latest versions of React Native, you may have an error during the Gradle build on Android (com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim). Run cd android && ./gradlew clean to fix this.
Manual linking
Manual link information for Android: Link
Usage example
import ImageResizer from '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.
});
Sample app
A basic, sample app is available in the example folder. It uses the module to resize a photo from the Camera Roll.
API
createResizedImage(
path,
maxWidth,
maxHeight,
compressFormat,
quality,
rotation = 0,
outputPath,
keepMeta = false,
options = {}
); // Returns a Promise
The promise resolves with an object containing: path, uri, name, size (bytes), width (pixels), and height of the new file. The URI can be used directly as the source of an <Image> component.
| Option | Description |
|---|---|
| path | Path of image file, or a base64 encoded image string prefixed with 'data:image/imagetype' where imagetype is jpeg or png. |
| width | Width to resize to (see mode for more details) |
| height | Height to resize to (see mode for more details) |
| compressFormat | Can be either JPEG, PNG or WEBP (android only). |
| quality | A number between 0 and 100. Used for the JPEG compression. |
| rotation | Rotation to apply to the image, in degrees, for android. On iOS, rotation is limited (and rounded) to multiples of 90 degrees. |
| outputPath | The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0). |
| keepMeta | If true, will attempt to preserve all file metadata/exif info, except the orientation value since the resizing also does rotation correction to the original image. Defaults to false, which means all metadata is lost. Note: This can only be true for JPEG images which are loaded from the file system (not Web). |
| options.mode | Similar to react-native Image's resizeMode: either contain (the default), cover, or stretch. contain will fit the image within width and height, preserving its ratio. cover preserves the aspect ratio, and makes sure the image is at least width wide or height tall. stretch will resize the image to exactly width and height. |
| options.onlyScaleDown | If true, will never enlarge the image, and will only make it smaller. |
��
About Bam
We are a 100 people company developing and designing multiplatform applications with React Native using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by email or through or contact form!
We will always answer you with pleasure
-
记录一下项目中主要用到的技术点吧~ 一.电子签名的显示，文件存储到手机，上传 电子签名用到的组件：react-native-signature-capture 写文件react-native-fs 上传用到的组件react-native-fetch-blob import React, { Component, Fragment } from "react"; import { StyleShe
-
简介 由于随着项目业务的增加，导致包越来越大，大概有10M，每次发热更下载都比较久，而且会消耗较多的下载资源，在分析包内容的时候，发现图片占据了约80%的体积，因此提出优化图片的方案。 分析包内容 首先我们先看下包内容构成，以安卓包为例，如下所示 |-- dist 10MB |-- drawable-hdpi 8K |-- drawable-mdpi 8.2MB |-- dra
-
react-native 开发笔记 es7 async react native默认编译配置可以编译一部分es7语法的，async await是其中的一种。使用起来自然是很简单，和koa 1.x 基本一致，没有区别。 多个路由页面之间的通信 有这样子一种场景 用户进来，显示未登录的首页 用户点击去登录，进入登录页面 登录成功，跳转回首页，这时候要重新加载首页的信息，那怎么通知首页更新呢 react
-
在线图片的宽高获取直接用 Image.getSize(url, (_width, _height) => { }); 这个就不细说了。 刚找到一个获取存在本地的静态图片宽高的方法 import { Image, } from 'react-native'; const orderImage = Image.resolveAssetSource(require('./images/ord
-
cover:等比拉伸 strech:保持原有大小 contain:图片拉伸 充满空间
-
react-native-image-crop-picker iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping Result Important note If you are using react-native >= 0.
-
app/build.gradle 还分级。属性： 我无法找出错误，任何帮助都将不胜感激，并请让我知道，如果有任何其他需要更好的理解。 null > try:使用--info或--debug选项运行以获得更多日志输出。使用--scan运行以获得完整的洞察力。 由：org.gradle.workers.internal.defaultworkerexecutor$workexecutionExcept
-
const loadLibrary=useCallback（异步（）= }，[用户信息]； Spring code---@PostMap（value="/api/v1/user"）public String createUser（@Request estParam（"image"）MultipartFile image）{System.out.println（image）；返回"；} -错误--组
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t