Hướng dẫn áp dụng Instagram filter photo trong React Native

Tram Ho

Chào mọi người, bài viết này mình sẽ giới thiệu đến mọi người cách sử dụng Instagram filter cho 1 ảnh trong project React Native nhé.

Trước tiên chúng ta cần có 1 project React Native cơ bản và tất nhiên là project sẽ bao gồm cả một bức ảnh mẫu để làm demo nhé. Trong ví dụ này mình sự dụng ảnh mẫu có tên là car.png.

Và package để sử dụng các filter đó là react-native-image-filter-kit

Trong file App.js import ảnh mẫu như sau

Component Emposs được cung cấp bởi thư viện react-native-image-filter-kit sẽ nhận Image như một prop và trả ra một bức ảnh mới kèm filter.

Tuy nhiên thư viện còn cung cấp rất nhiều các filter khác nữa, nên để view được các filter đó trông như thế nào thì chúng ta sẽ xử lý khác đi một chút. Chúng ta sẽ import một loạt các component và define chúng thành một mảng filter như sau:

Tiếp theo chúng ta cần render một list các filter nằm dưới bức ảnh mặc định ban đầu và căn giữa khi filter được chọn. Trong App.js:

Nó sẽ như ảnh sau

Sau khi chọn, thì method onExtractImage sẽ lưu URL ảnh được trích xuất sau khi đã apply filter bởi biến extractedUri ref, cái mà bạn có thể dùng để lưu trên server.

Trên đây là một ví dụ nhỏ về sử dụng filter react-native-image-filter-kit, hi vọng nó có ích cho mọi người.

Cảm ơn vì đã đọc bài viết!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo