如何在expo 50 android制作应用程序中对png资源进行base64编码

问题描述 投票:0回答:1

我多年来一直试图让它发挥作用,并尝试了许多不同的方法来让它发挥作用。我正在尝试在 Android 应用程序中获取使用 expo 50 创建的捆绑资源,对其进行 base64 编码,以便我可以使用它来创建 PDF。它在开发中运行良好,但在构建 APK 后它无法加载。我无法使用 expo 资产中的资产,因为我相信这是针对 sdk 51 的。我在其他地方找到了一些线程,说要在 asset[0].localUri 中提供的资源标识符前面添加 file:/// 或 file:///android_asset 或 file:///android_res 但这些变体都不起作用,问题不是 asset[0].localUri 未定义,而是我不知道如何使用此资源标识符通过文件系统访问资源。我尝试解压 APK 来查看文件结构,但它不像普通的 Android 应用程序,我看不到任何提及我尝试使用的任何图像,但是该应用程序还使用其他图像,例如启动画面等,即使它们确实有效,我也找不到它们。这是我正在尝试使用的屏幕的最小版本。我很感激任何帮助。

import { View, Text, StyleSheet, Alert, Button } from 'react-native';
import { useAssets } from 'expo-asset';
import * as FileSystem from 'expo-file-system';
import RNHTMLtoPDF from 'react-native-html-to-pdf';

const App = () => {
    const [assets, error] = useAssets([require('./assets/images/your-image.png')]);
    const [base64Image, setBase64Image] = useState(null);

    useEffect(() => {
        const loadBase64Image = async () => {
            if (assets && assets[0]) {
                try {
                    const asset = assets[0];
                    const uri = asset.localUri || asset.uri;

                    if (!uri) {
                        Alert.alert("Error", "Asset URI is not available.");
                        return;
                    }

                    const base64 = await FileSystem.readAsStringAsync(uri, {
                        encoding: FileSystem.EncodingType.Base64,
                    });

                    setBase64Image(base64);
                } catch (e) {
                    Alert.alert("Error", `Exception in loadBase64Image: ${e.message}`);
                }
            }
        };

        loadBase64Image();
    }, [assets]);

    const generatePDF = async () => {
        if (!base64Image) {
            Alert.alert("Error", "Base64 image data is not available.");
            return;
        }

        const htmlContent = `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>PDF Document</title>
            </head>
            <body>
                <h1>Base64 Image PDF Example</h1>
                <img src="data:image/png;base64,${base64Image}" alt="Image" />
            </body>
            </html>
        `;

        const options = {
            html: htmlContent,
            fileName: 'test',
            directory: 'Documents',
        };

        try {
            const file = await RNHTMLtoPDF.convert(options);
            Alert.alert('PDF Generated', `PDF saved to ${file.filePath}`);
        } catch (e) {
            Alert.alert("Error", `Failed to generate PDF: ${e.message}`);
        }
    };

    return (
        <View style={styles.container}>
            <Text>Base64 Image PDF Example</Text>
            <Button title="Generate PDF" onPress={generatePDF} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
});

export default App;
android react-native expo
1个回答
0
投票

您可能想使用 ImageManipulator expo 包。它具有 以 base64 格式保存图像的选项

© www.soinside.com 2019 - 2024. All rights reserved.