uniapp iOS保存图片到相册

原创

mob649e81630984 2024-08-27 05:54:10 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81630984的原创作品，请联系作者获取转载授权，否则将追究法律责任

uniapp 实现 iOS 保存图片到相册的完整教程

在开发移动应用时，保存图片到相册是一项常见的需求。对于刚入行的小白来说，实现这一功能可能感到有些复杂。本文将逐步引导你通过 uniapp 在 iOS 上保存图片到相册的过程，确保你能够清晰理解每个步骤。

整体流程

首先，让我们来简单了解一下整个流程。下表列出了实现这一功能的主要步骤：

步骤	描述
1. 选择图片	通过相册或摄像头选择图片
2. 请求权限	请求用户授权访问相册
3. 保存图片	将图片保存到相册
4. 提示用户	提示用户保存成功或失败

下面我们将详细讲解每一步所需的代码及其说明。

1. 选择图片

首先，我们需要让用户选择要保存的图片。可以使用 uni.chooseImage 方法来实现。

uni.chooseImage({
    count: 1, // 默认为9，设置为1表示只选择一张图片
    success: function (res) {
        // 返回选定照片的本地文件路径列表
        const tempFilePath = res.tempFilePaths[0];
        console.log('选中的图片路径: ', tempFilePath);
        // 调用请求权限和保存图片的方法
        requestPermissionAndSave(tempFilePath);
    },
    fail: function (err) {
        console.error('选择图片失败: ', err);
    }
});

代码解析

uni.chooseImage：选择图片的方法。
count：限制选择的图片数量。
success回调中，我们获取到用户选择的图片路径，并将其传递给后续的方法。

2. 请求权限

在 iOS 上，保存图片到相册需要用户的权限。我们需要使用 uni.authorize 来请求相册权限。

function requestPermissionAndSave(tempFilePath) {
    uni.authorize({
        scope: 'scope.writePhotosAlbum', // 请求相册写入权限
        success: function () {
            // 权限请求成功，调用保存函数
            saveImageToPhotos(tempFilePath);
        },
        fail: function (err) {
            console.error('请求权限失败: ', err);
            uni.showToast({
                title: '需要相册权限',
                icon: 'none'
            });
        }
    });
}

代码解析

uni.authorize：请求权限的方法。
scope：指定请求的权限，这里是相册写入权限。
success回调中，如果权限请求成功，我们会调用保存图片的函数。

3. 保存图片

请求权限后，我们可以进行实际的保存操作，使用 uni.saveImageToPhotosAlbum 方法。

function saveImageToPhotos(tempFilePath) {
    uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: function () {
            console.log('图片保存成功');
            uni.showToast({
                title: '图片已保存到相册',
                icon: 'success'
            });
        },
        fail: function (err) {
            console.error('保存图片失败: ', err);
            uni.showToast({
                title: '保存失败',
                icon: 'none'
            });
        }
    });
}

代码解析

uni.saveImageToPhotosAlbum：将图片保存到相册的方法。
filePath：传入需要保存的图片路径。
success回调中，如果保存成功，显示成功提示。

4. 提示用户

在用户选择的图片成功保存到相册后，我们通过 uni.showToast 来告知用户结果。

uni.showToast({
    title: '图片已保存到相册',
    icon: 'success'
});

代码解析

uni.showToast：用于提示用户的消息框。

完整代码示例

将上述各个步骤整合在一起，下面是一个完整的实现：

function chooseAndSaveImage() {
    uni.chooseImage({
        count: 1,
        success: function (res) {
            const tempFilePath = res.tempFilePaths[0];
            console.log('选中的图片路径: ', tempFilePath);
            requestPermissionAndSave(tempFilePath);
        },
        fail: function (err) {
            console.error('选择图片失败: ', err);
        }
    });
}

function requestPermissionAndSave(tempFilePath) {
    uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success: function () {
            saveImageToPhotos(tempFilePath);
        },
        fail: function (err) {
            console.error('请求权限失败: ', err);
            uni.showToast({
                title: '需要相册权限',
                icon: 'none'
            });
        }
    });
}

function saveImageToPhotos(tempFilePath) {
    uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: function () {
            console.log('图片保存成功');
            uni.showToast({
                title: '图片已保存到相册',
                icon: 'success'
            });
        },
        fail: function (err) {
            console.error('保存图片失败: ', err);
            uni.showToast({
                title: '保存失败',
                icon: 'none'
            });
        }
    });
}

过程序列图

下面是保存图片到相册的整个流程序列图：

sequenceDiagram
    participant User
    participant App
    User->>App: 选择图片
    App->>App: 请求权限
    App-->>User: 权限请求成功
    App->>App: 保存图片到相册
    App-->>User: 图片保存成功