Skip to content
Snippets Groups Projects

Draft: Resolve "Resize image before upload"

Open Anders Langlie requested to merge 69-resize-image-before-upload into master
4 files
+ 927
20402
Compare changes
  • Side-by-side
  • Inline

Files

+ 96
39
import React, { useState, useEffect } from "react";
import {
StyleSheet,
ScrollView,
View,
Image,
Dimensions,
} from "react-native";
import { StyleSheet, ScrollView, View, Image, Dimensions } from "react-native";
import { Camera } from "expo-camera";
import mime from "mime";
import * as ImageManipulator from 'expo-image-manipulator';
import CustomCamera from "../../components/CustomCamera";
import CustomImagePicker from "../../components/CustomImagePicker";
import ImagePreview from "../../components/ImagePreview";
@@ -25,15 +20,14 @@ const deviceWidth = Dimensions.get("window").width;
/**
* This component renders the camera screen. This screen consists of an image picker, which makes the user able to upload images from their phones
* library. It also consists of a built-in camera, where the user can take a photo while in the application. The user might need to grant premission for
* the app to be able to use the camera.
*
* @param {*} props - used for redux and navigation.
*
* library. It also consists of a built-in camera, where the user can take a photo while in the application. The user might need to grant premission for
* the app to be able to use the camera.
*
* @param {*} props - used for redux and navigation.
*
* @returns the component
*/
const _CameraScreen = (props) => {
const [isCameraMode, setShowCamera] = useState(false);
const [isPreviewMode, setPreviewMode] = useState(false);
const [image, setImage] = useState(null);
@@ -60,34 +54,97 @@ const _CameraScreen = (props) => {
setShowIndicator(true);
const newImageUri = "file:///" + image.split("file:/").join("");
let bodyFormData = new FormData();
bodyFormData.append("image", {
uri: newImageUri,
type: mime.getType(newImageUri),
name: newImageUri.split("/").pop(),
});
APIKit.post("/findSalamanderInfo", bodyFormData)
.then(function (response) {
setShowIndicator(false);
if (response.data.status === 200) {
setImage(null);
props.navigation.navigate("Verify", {
screen: "RegisterSalamander",
params: {
salamanderSex: response.data.sex,
salamanderSpecies: response.data.species,
image: response.data.image,
},
});
Image.getSize(
newImageUri,
(width, height) => {
console.log(`The image dimensions are ${width}x${height}`);
let maxSize = 1280;
let largerDim = Math.max(width, height);
if (largerDim > maxSize) {
let scalingFactor = maxSize / largerDim;
ImageManipulator.manipulateAsync(
newImageUri,
[{ resize: {width: width*scalingFactor, height: height*scalingFactor} }],
{format: ImageManipulator.SaveFormat.PNG }
)
.then((response) => {
console.log(response.uri)
let bodyFormData = new FormData();
bodyFormData.append("image", {
uri: response.uri,
type: mime.getType(response.uri),
name: newImageUri.split("/").pop(),
});
APIKit.post("/findSalamanderInfo", bodyFormData)
.then(function (response) {
setShowIndicator(false);
if (response.data.status === 200) {
setImage(null);
props.navigation.navigate("Verify", {
screen: "RegisterSalamander",
params: {
salamanderSex: response.data.sex,
salamanderSpecies: response.data.species,
image: response.data.image,
},
});
} else {
toastError("top", 3000, response.data.message);
}
})
.catch(function (response) {
setShowIndicator(false);
toast500(response.status);
});
// response.uri is the URI of the new image that can now be displayed, uploaded...
// response.path is the path of the new image
// response.name is the name of the new image with the extension
// response.size is the size of the new image
})
.catch((err) => {
console.log(err, "Resize failed!");
// Oops, something went wrong. Check that the filename is correct and
// inspect err to get more details.
});
} else {
toastError("top", 3000, response.data.message);
let bodyFormData = new FormData();
bodyFormData.append("image", {
uri: newImageUri,
type: mime.getType(newImageUri),
name: newImageUri.split("/").pop(),
});
APIKit.post("/findSalamanderInfo", bodyFormData)
.then(function (response) {
setShowIndicator(false);
if (response.data.status === 200) {
setImage(null);
props.navigation.navigate("Verify", {
screen: "RegisterSalamander",
params: {
salamanderSex: response.data.sex,
salamanderSpecies: response.data.species,
image: response.data.image,
},
});
} else {
toastError("top", 3000, response.data.message);
}
})
.catch(function (response) {
setShowIndicator(false);
toast500(response.status);
});
}
})
.catch(function (response) {
setShowIndicator(false);
toast500(response.status);
});
},
(error) => {
console.error(`Couldn't get the image size: ${error.message}`);
}
);
};
return (
Loading