React native React Native：如何旋转基本64图像

我有

base64

格式的PNG图像，将保存在服务器中，但在保存到服务器之前，图像需要旋转

我已经讲过了，但在

react native

中似乎不可能

在

react native

中是否有方法旋转

base64

图像

我尝试使用，但在

node\u模块中出现了很多错误。是否有其他人尝试过此软件包？
有一个软件包，您可以旋转任何图像，包括base64

安装

首先通过npm安装软件包

$ npm install react-native-image-rotate

然后使用rnpm链接本机库

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

用法

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

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',
    },
});

示例

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

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',
    },
});

从“React”导入React；
从“react native”导入{样式表、视图、图像、TouchableHighlight、文本}；
从“反应本机图像旋转”导入ImageRotate；
const string='Your base64 image here'
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
图像：字符串，
当前角度：0，
宽度：150，
身高：240，
};
this.rotate=this.rotate.bind（this）；
}
旋转=（角度）=>{
const nextAngle=this.state.currentAngle+角度；
ImageRotate.rotateImage(
一串
nextAngle，
（uri）=>{
log（uri，'uri'）
这是我的国家({
图片：uri，
当前角度：nextAngle，
宽度：this.state.height，
高度：this.state.width，
});
},
（错误）=>{
控制台错误（error）；
}
);
}
render（）{
返回(
这个。旋转（90）}
style={style.button}
>
顺时针旋转
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
这是我的研究和发现

然后是.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',
  },
});

iOS

用户是否可以旋转它？如果您总是想将图像旋转90度，您可以在服务器上进行处理。@Tim，用户将无权旋转。那么，你能告诉我如何在服务器端完成这个过程吗？@Kishore你在服务器端使用什么技术？这里的目的不是简单地在应用程序上旋转图像。图像本身必须改变，这意味着图像数据需要改变，这样即使是服务器也会有旋转的图像，而不仅仅是前端的假旋转。
react-native run-ios