質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

解決済

1回答

752閲覧

アップロードした画像を圧縮した後に保存したい(react native)

yamady

総合スコア176

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2018/05/30 09:11

編集2018/05/31 00:57

React Nativeアプリで、画像アップローダーを実装したいと考えています。react-native-image-picker(ライブラリ)でカメラ起動あるいは、カメラロールから画像をアップロードしたあとに、react-native-image-resizer(ライブラリ)で圧縮するというプロセスを想定しています。

しかし、現在エラーが出てしまい、困っています。

Warning: Failed prop type: Invalid prop `source` supplied to `Image`.

開発環境

React Native 0.55.4
React Native Image Picker 0.26.10
React Native Image Resizer ^1.0.0

ソースコード

JavaScript

1export default class App extends Component { 2 componentWillMount() { 3 const config = { 4・・・ 5 }; 6 7 firebase.initializeApp(config); 8 } 9 10 /** 11 * 12 * Image Picker makes user available to upload images 13 */ 14 state = { 15 ImageSource: null, 16 errorUpload: false, 17 }; 18 19 pickImage() { 20 const options = { 21 title: 'Select a Image', 22 storageOptions: { 23 skipBackup: true, 24 path: 'images' 25 } 26 }; 27 28 // Image Picker で 画像を表示する 29 ImagePicker.showImagePicker(options, (response) => { 30 console.log('Response = ', response); 31 if (response.didCancel) { 32 console.log('User cancelled photo picker'); 33 } 34 else if (response.error) { 35 console.log('ImagePicker Error: ', response.error); 36 } 37 else if (response.customButton) { 38 console.log('User tapped custom button: ', response.customButton); 39 } 40 else { 41 let source = { uri: response.uri }; 42 console.log('source', source); 43 44 // Image Resizer で 画像をリサイズする 45 ImageResizer.createResizedImage(source.uri, 800, 600, 'JPEG', 80) 46 .then(({uri}) => { 47 this.setState({ 48 ImageSource: uri, 49 }); 50 }).catch((err) => { 51 console.log(err); 52 return Alert.alert('Unable to resize the photo', 53 'Check the console for full the error message'); 54 }); 55 } 56 }); 57 } 58 59 render() { 60 return ( 61 <View style={styles.container}> 62 <Text>Image</Text> 63 <TouchableOpacity 64 style={styles.frame} 65 onPress={this.pickPhoto.bind(this)} 66 > 67 { 68 this.state.ImageSource === null ? 69 <View style={styles.image}> 70 </View> : 71 <View> 72 <Image style={styles.sample} source={this.state.ImageSource} /> 73 </View> 74 } 75 </TouchableOpacity> 76 </View> 77 ); 78 } 79}

なにか他にも圧縮する上でオススメなやり方があれば、ご教示いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Image Resizerした後に、let resizeSource = { uri: uri }と定義すればいけました!

投稿2018/05/31 01:05

yamady

総合スコア176

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問