React-Native : How to rotate base 64 image

Question

I have PNG image in base64 format which will be saved in server, But before saving into server image need to be rotated.

I have gone through this link, but it doesn't seem possible in react-native.

Is there any way in react-native to rotate base64 image?

I tried using gm package, But i end up with lot of errors in node_modules. Has any one else tried this package?

Should the user be able to rotate it, or not? If you always want to rotate your image by for example 90 degree, you can just do the processing on the server. — Tim, Jul 13 '19 at 11:49
@Tim, User will not have access to rotate. SO, Can you tell me how to do this process in server it self? — ThinkAndCode, Jul 17 '19 at 05:30

score 4 · Answer 1 · answered Jul 13 '19 at 14:00

There is a package react-native-image-rotate you can rotate any image including base64

Installation

First install the package via npm

$ npm install react-native-image-rotate

then use rnpm to link native libraries

$ react-native link react-native-image-rotate

usage

static rotateImage(
    uri: string,
    angle: number,
    success: (uri: string) => void,
    failure: (error: Object) => void
  ) : void

Example

import React from 'react';
import { StyleSheet, View,Image, TouchableHighlight,Text } from 'react-native';

import ImageRotate from 'react-native-image-rotate';


const string = 'Your base64 image here' 
    export default class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            image: string,
            currentAngle: 0,
            width: 150,
            height: 240,
        };

        this.rotate = this.rotate.bind(this);

    }
    rotate = (angle) => {
        const nextAngle = this.state.currentAngle + angle;
        ImageRotate.rotateImage(
            string,
            nextAngle,
            (uri) => {
                console.log(uri, 'uri')
                this.setState({
                    image: uri,
                    currentAngle: nextAngle,
                    width: this.state.height,
                    height: this.state.width,
                });
            },
            (error) => {
                console.error(error);
            }
        );
    }


    render(){

        return (
            <View style={{flex:1,alignItems:'center'}}>
                <Image source={{uri: this.state.image}} style={{width: 300, height: 300}}/>
                <TouchableHighlight
                    onPress={() => this.rotate(90)}
                    style={styles.button}
                >
                    <Text style={styles.text}>ROTATE CW</Text>
                </TouchableHighlight>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

score 0 · Answer 2 · answered Jul 23 '19 at 05:47

Here is My research and what i have found https://aboutreact.com/react-native-rotate-image-view-using-animation/

npm install -g react-native-cli 
react-native init myproject 

cd myproject

then .js

import React from 'react';
import { StyleSheet, View, Animated, Image, Easing } from 'react-native';
export default class App extends React.Component {
    RotateValueKeeper: any;
  constructor() {
    super();
    this.RotateValueKeeper = new Animated.Value(0);
  }
  componentDidMount() {
    this.ImageRotateStarterFunction();
  }
  ImageRotateStarterFunction() {
    this.RotateValueKeeper.setValue(0);
    Animated.timing(this.RotateValueKeeper, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
    }).start(() => this.ImageRotateStarterFunction());
  }
  render() {
    const MyRotateData = this.RotateValueKeeper.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });
    return (
      <View style={styles.container}>
        <Animated.Image
          style={{
            width: 150,
            height: 150,
            transform: [{ rotate: MyRotateData }],
          }}
          source={{
            uri:
              'https://aboutreact.com/wp-content/uploads/2018/08/logo1024.png',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#C2C2C2',
  },
});

then

Android

react-native run-android

iOS

react-native run-ios

Purpose here is not to simply rotate the image on the app. The image itself has to change, meaning the image data needs to change so that even server will have the rotated image and not just fake rotating on front-end. — Arjun Nayak, Nov 03 '19 at 07:16

React-Native : How to rotate base 64 image

2 Answers2