Question

我有base64格式的PNG图片，该图片将保存在服务器中，但是在保存到服务器图片之前，需要旋转。

我已经看过这个link，但是在react-native中似乎不可能。

react-native中是否有任何方法可以旋转base64图像？

我尝试使用gm package，但最终在node_modules中出现很多错误。还有其他人尝试过此软件包吗？

Answer 1

有一个软件包react-native-image-rotate ，您可以旋转包括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',
    },
});

Answer 2

这是我的研究以及我发现的https://aboutreact.com/react-native-rotate-image-view-using-animation/

data_1 = '780e51'

然后是.js

select disease.condition_id, (disease::float/total::float) as prevalence
from (
    select condition_id, count(person_id)
    from a.condition
    where condition_id=316139
    group by condition_id
    ) as disease
join (
    select count(distinct person_id) as total
    from a.person
    )as total;

然后

Android

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

cd myproject

iOS

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

React-Native：如何旋转base 64图像

2 个答案: