react 图片压缩-react-native-image-crop-picker 详解

react app网页里面加载的pdf过大,要通过图片图片压缩,减少pdf的大小,再通过二分检索,预加载的,懒加载的方法实现快速加载。

1、需要裁剪可以用这个库, 不需要裁剪推荐 react-native-image-picker

2、

Android是否支持多选?

笔者试了下小米、魅族、坚果、IOS是可以的。如作者所说,多个选择取决于手机制造商。一些制造商不支持它。这还取决于操作系统版本。尝试长按图片。

3、安装失败、不能运行等问题。移步 issues 很多问题都可以解决。

react-native-image-crop-picker是一款注重剪裁,相册单选、多选的第三方框架。在我集成了react-native-image-picker的时候发现,他的剪裁不太友好。作者推荐了这个react-native-image-crop-picker。看到搜索不到该中文的翻译,故此文作为学习总结。

我用的是魅族pro6, 实现和github作者图有点出入, 基本没有自己处理界面,我觉得还是可以接受的。

支持IOS/Android的相机,视频压缩,多个图像选择和裁剪处理。

调用单图选择器与裁剪

选择多个图片的选择器

模块创建临时文件图像将在未来的某个时间自动清理。 如果要强制清理,可以使用clean清理所有临时文件图像,或者使用cleanSingle(path)清除单个临时文件。

注:这里希望开发者不清楚的可以自己尝试,看下效果

iOS (IOS没了解,暂时没有去进行翻译)

Android

Android:

不需要其他操作

iOS

MIT

1、React项目实现点击图片预览:

“React-zmage” 一个图片放大查看组件,动画流畅简洁,使用简单方便。react-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以立即获得缩放效果, 替代原生的 img 标签,也可以实现图片的翻转。

(1)引入:import Zmage from 'react-zmage'

(2)将页面中的 img 标签替换为 Zmage

<img src="图片源连接" /> 替换为<Zmage src="图片源连接" />

现在这些图片都可以点击放大查看了 !

2、() 它的作用是拼接路径,其传参个数没有限制,每个参数均表示一段路径。

从后向前,若字符以 / 开头,不会拼接到前面的路径(因为拼接到此已经是一个绝对路径);若以 ../ 开头,拼接前面的路径,且不含最后一节路径;若以 ./ 开头 或者没有符号 则拼接前面路径;

3、在开发时,当我们使用()拼接路径时,会遇到需要使用绝对路径的情况,但是当我们把项目部署到服务器时,绝对路径会发生变化。因此,需要一个可以计算的绝对路径的表达方式。有了__dirname,我们就可以解决以下问题。__dirname, 在所有情况下,该变量都表示当前运行的js文件所在的目录。