在 React Native 中將圖像轉換為 base64 並發送到 graphQl

Question

在將圖像發送到 graphql 之前，如何將從 imagepicker 中選擇的圖像轉換為 base64？

我設置 useState 變量來設置

const [image, setImage] = useState(null);

我可以在這里做些什么來轉換？

   const choosePhotoFromLibrary = async() => {
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
    }

    const pickerResult = await ImagePicker.launchImageLibraryAsync();

    if(!pickerResult.cancelled) {
        setImage(pickerResuls.uri);
    }

然后我從中獲取圖像並將其設置為 useState 變量

 <View style={styles.picContainer}>
     <AddPicButton
      onPress= {choosePhotoFromLibrary}
      image= {image}
      />
      <Text style={styles.bottomText}>ADD A PICTURE</Text>

 </View>

Answer 1

ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
      ImageStore.getBase64ForTag(imageURI, (base64Data) => {
          // base64Data contains the base64string of the image
      }, (reason) => console.error(reason));
 }, (reason) => console.error(reason));

Answer 2

原來ImagePicker有自己的base64轉換

const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 0,
            base64: true
        });

        console.log(result);

        if (!result.cancelled) {
            setImage(result.uri);
        }
        console.log(result);
        
    };