项目作者: hu9osaez

项目描述 :
:art: Simple library to extract the dominant color from an image in React Native
高级语言: Java
项目地址: git://github.com/hu9osaez/react-native-dominant-color.git
创建时间: 2017-12-12T16:54:53Z
项目社区:https://github.com/hu9osaez/react-native-dominant-color

开源协议:MIT License

下载


react-native-dominant-color

PRs Welcome
Extract the dominant colors of an image (Just for Android).

Getting started

$ npm install react-native-dominant-color --save

Mostly automatic installation

$ react-native link react-native-dominant-color

Manual installation

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
    • Add import cl.hasaezs.rndominantcolor.RNDominantColorPackage; to the imports at the top of the file
    • Add new RNDominantColorPackage() to the list returned by the getPackages() method
  2. Append the following lines to android/settings.gradle:
    1. include ':react-native-dominant-color'
    2. project(':react-native-dominant-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dominant-color/android')
  3. Insert the following lines inside the dependencies block in android/app/build.gradle:
    1. compile project(':react-native-dominant-color')

Usage

  1. import React, { Component } from 'react';
  2. import { StyleSheet, View } from 'react-native';
  3. import { colorsFromUrl } from 'react-native-dominant-color';
  4. const imageUrl = 'https://source.unsplash.com/random/800x600';
  5. const styles = StyleSheet.create({
  6. container: {
  7. flex: 1,
  8. alignItems: 'center',
  9. justifyContent: 'center'
  10. },
  11. image: {
  12. width: 300,
  13. height: 300,
  14. borderRadius: 10
  15. }
  16. });
  17. class Example extends Component {
  18. constructor() {
  19. super();
  20. this.state = {
  21. color: '#ffffff',
  22. };
  23. }
  24. componentWillMount() {
  25. let self = this;
  26. colorsFromUrl(imageUrl, (err, colors) => {
  27. if(!err) {
  28. self.setState({ color: colors.averageColor });
  29. }
  30. });
  31. }
  32. render() {
  33. return (
  34. <View style={[styles.container, {backgroundColor: this.state.color }]}>
  35. <Image style={styles.image} source={{ uri: imageUrl}} ></Image>
  36. </View>
  37. );
  38. }
  39. }

API

Methods

  • colorsFromUrl(imageUrl, callback): Callback returns an object with the prominent colors from the image. Object properties are averageColor, dominantColor, vibrantColor, darkVibrantColor and lightVibrantColor. If some color doesn’t exist will return #CCCCCC.