1.0.1 • Published 2 years ago

react-native-saliency-crop v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-saliency-crop

使用 Vision 裁剪图像重点区域的 react-native 库 | Cropping Images Using Saliency

识别结果示例,confidence(置信度,0 - 1区间内的小数)的值越大可信度越高。基于注意力模式下最多返回 1 个区域,基于对象模式下最多返回 3 个区域。

[
  {
    confidence: 0.848;
    path: "file:///private/mobile/Application/tmp/25D8F7E7-9A52-4E1C-A0D2-3CE07CF7E452.jpg",
    boundingBox: { 
        "height": 1841.765625, 
        "width": 2071.6171875, 
        "x": 825.3984375,
        "y": 1128.09375
      }
  }
]

❗️ :warning:

目前仅支持 iOS 13.0+

Installation

$ npm install react-native-saliency-crop --save

or

$ yarn add react-native-saliency-crop

# RN >= 0.60
cd ios && pod install
# RN < 0.60
react-native link react-native-saliency-crop

Usage

简单使用

import * as SaliencyCrop from 'react-native-saliency-crop';

SaliencyCrop.request(path) // 绝对本地路径
  .then((result) => {
    // success
  })
  .catch((error) => {
    // error
  });

高级使用 (使用网络图像)

import * as SaliencyCrop from 'react-native-saliency-crop';
import RNFS from 'react-native-fs';

const path = `${RNFS.TemporaryDirectoryPath}/IMG_1234.jpg`;

// https://github.com/itinance/react-native-fs
RNFS.downloadFile({
  fromUrl: 'https://s4.ax1x.com/2022/01/15/7JJaDI.png',
  toFile: path,
}).promise.then((res) => {
  SaliencyCrop.request(path, {
    saliencyType: SaliencyCrop.SaliencyType.ObjectnessBased,
    saveFormat: SaliencyCrop.ImageFormat.JPEG,
    quality: 0.8,
  })
    .then((result) => {
      // success
    })
    .catch((error) => {
      // error
    });
});

API

request(path: string, options?: Object): Promise<{Result[]>

参数类型描述
pathstring图像文件的本地绝对路径. 可使用 react-native-fs constants 获取
options (可选)object可选项,见下 Options

Options

参数类型描述默认值
saliencyType (可选)number图像重点区域类型,支持两种类型:基于注意力、基于对象SaliencyType.AttentionBased
saveFormat (可选)number指定保存图像结果的类型ImageFormat.JPEG
quality (可选)number结果图像的压缩级别,仅 saveFormatjpeg 时有效 0.0 - 1.0
preferBackgroundProcessing (可选)boolean如果设置为 true,则此属性会减少请求的内存占用、处理占用和 CPU/GPU 争用,但可能会花费更长的执行时间。false
usesCPUOnly (可选)boolean仅在 CPU 上执行。设置 false 表示可以自由地利用 GPU 来加速其处理。false
orientation (可选)number图像的方向Orientation.Up

Result - 识别结果

名称类型描述
confidencenumber置信度,0 - 1
pathstring裁剪后图像的路径
boundingBoxobject重点区域边界框 { x: number; y: number; width: number; height: number; }

SaliencyType

  • Orientation.AttentionBased: 1 - 基于注意力
  • Orientation.ObjectnessBased: 2 - 基于对象

ImageFormat

  • ImageFormat.JPEG: 1 - jpg 格式
  • ImageFormat.PNG: 2 - png 格式

Orientation

  • Orientation.Up: 1 - 默认方向
  • Orientation.UpMirrored: 2 - 水平翻转
  • Orientation.Down: 3 - 旋转 180°
  • Orientation.DownMirrored: 4 - 垂直翻转
  • Orientation.Left: 5 - 水平翻转并逆时针旋转 90°
  • Orientation.LeftMirrored: 6 - 顺时针旋转 90°
  • Orientation.Right: 7 - 水平翻转并顺时针旋转 90°
  • Orientation.RightMirrored: 8 - 顺时针旋转 90°

Troubleshooting

  1. 检查您的最低 iOS 版本。react-native-saliency-image 要求最低 iOS 版本为 11.0(目前仅支持 iOS 13.0+ 使用)。
    • 打开你的 Podfile
    • 确保 platform :ios 设置为 11.0 或更高
    • 确保 iOS Deployment Target 设置为 11.0 或更高
  2. 确保您在项目中创建了 Swift 桥接头。
    • 使用 Xcode 打开你的项目(xxx.xcworkspace
    • 按照以下步骤创建 Swift 文件 File > New > File (⌘+N)
    • 选择 Swift File 并点击 Next
    • 输入文件名 BridgingFile.swift,然后点击创建,提示时点击 Create Bridging Header

TODO

  • 支持网络图像

License

MIT