React Native gl Image Filters: Thêm Bộ lọc Tuyệt đẹp vào Ảnh của Bạn

react-native-gl-image-filters

Liên kết OpenGL cho React Native để thực hiện hiệu ứng phức tạp trên hình ảnh và các thành phần, trong mô hình VDOM mô tả. Bạn có thể sử dụng các bộ lọc được định sẵn:

• mờ
• độ tương phản
• bão hòa màu
• độ sáng
• màu sắc
• âm phần
• nâu cổ
• làm sắc nét
• nhiệt độ
• ánh sáng.

**gl-react-native** là một phiên bản của**gl-react** cho**react-native** . Vui lòng read the main gl-react README và gl-react-native README để biết thêm thông tin.

API

• Props
• Hằng số
• Cài đặt mặc định
• Tiện ích

Props

Props cho thành phần ImageFilters

Hằng số

• Giá trị Mặc định
• Cài đặt mặc định

Giá trị Mặc định

Có thể được sử dụng để đặt bộ lọc về giá trị mặc định một cách thủ công.

interface DefaultValues {
  sepia: number;
  hue: number;
  blur: number;
  sharpen: number;
  negative: number;
  temperature: number;
  brightness: number;
  contrast: number;
  saturation: number;
  exposure: number;
  colorOverlay: Array<number>;
}

Ví dụ sử dụng

import ImageFilters, { Constants } from 'react-native-gl-image-filters';

...

state = {
  blur: 4,
};

...

resetFilter = () => {
  this.setState({
    blur: Constants.DefaultValues.blur,
  });
}

Cài đặt mặc định

Có thể sử dụng để liệt kê các thiết lập trước có sẵn.

interface DefaultPresets extends Array<DefaultPreset> {}


interface DefaultPreset {
  name: string,
  description: string,
  preset: Preset,
}


interface Preset {
  sepia?: number;
  hue?: number;
  blur?: number;
  sharpen?: number;
  negative?: number;
  temperature?: number;
  brightness?: number;
  contrast?: number;
  saturation?: number;
  exposure?: number;
}

Ví dụ về cách sử dụng

import ImageFilters, { Constants } from 'react-native-gl-image-filters';

...

<>
  {Constants.DefaultPresets.map(item =>
    <View>
      <Text>{item.name}</Text>
      <Text>{item.description}</Text>
      <Surface>
        <ImageFilters {...item.preset}>
          {{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
        </ImageFilters>
       </Surface>
    </View>
  )}

Thiết lập trước

Sử dụng các thiết lập trước được định sẵn.

import { Presets } from 'react-native-gl-image-filters';

Presets.NoPreset;
Presets.AmaroPreset;
Presets.ClarendonPreset;
Presets.DogpatchPreset;
Presets.GinghamPreset;
Presets.GinzaPreset;
Presets.HefePreset;
Presets.LudwigPreset;
Presets.SkylinePreset;
Presets.SlumberPreset;
Presets.SierraPreset;
Presets.StinsonPreset;

...

<ImageFilters {...Presets.StinsonPreset}>
  {{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
</ImageFilters>

Công cụ

createPreset

Sẵn có để tạo các thiết lập trước riêng.

import ImageFilters, { Utils } from 'react-native-gl-image-filters';

const MyOwnPreset = Utils.createPreset({
  brightness: .1,
  saturation: -.5,
  sepia: .15,
});

...

<ImageFilters {...MyOwnPreset}>
  {{ uri: 'https://i.imgur.com/5EOyTDQ.jpg' }}
</ImageFilters>

Phạm vi tối thiểu và tối đa được đề xuất cho từng bộ lọc

Cài đặt

Cài đặt cho React Native

npm i --save react-native-gl-image-filters
npm i --save gl-react@^4.0.1
npm i --save gl-react-native@^4.0.1
npm i --save buffer@^5.4.3
npm i --save react-native-unimodules@^0.7.0

hoặc

yarn add react-native-gl-image-filters
yarn add gl-react@^4.0.1
yarn add gl-react-native@^4.0.1
yarn add buffer@^5.4.3
yarn add react-native-unimodules@^0.7.0

Cấu hình Ứng dụng React Native của bạn

trên iOS:

https://github.com/unimodules/react-native-unimodules#-configure-ios

trên Android:

https://github.com/unimodules/react-native-unimodules#-configure-android

Cài đặt trên Expo

npm i --save react-native-gl-image-filters
npm i --save expo-gl
npm i --save gl-react@^4.0.1
npm i --save gl-react-expo@^4.0.1
npm i --save buffer@^5.4.3

hoặc

yarn add react-native-gl-image-filters
yarn add expo-gl
yarn add gl-react@^4.0.1
yarn add gl-react-expo@^4.0.1
yarn add buffer@^5.4.3

Cài đặt trên React Web

npm i --save react-native-gl-image-filters
npm i --save gl-react@^4.0.1
npm i --save gl-react-dom@^4.0.1

hoặc

yarn add react-native-gl-image-filters
yarn add gl-react@^4.0.1
yarn add gl-react-dom@^4.0.1

Sử dụng

Sử dụng với React Native

Ví dụ ở đây: examples/react-native

Sử dụng với Expo

Snack: https://snack.expo.io/@gregoryrn/expo-gregorynative-react-native-gl-image-filters
Ví dụ ở đây: examples/expo

Sử dụng với React web

Blitz: https://stackblitz.com/edit/react-native-gl-image-filters-web-example
Ví dụ ở đây: examples/web

Chi tiết tải về:

Tác giả: GregoryNative
Nguồn: https://github.com/GregoryNative/react-native-gl-image-filters

Giấy phép: MIT license