您的位置:

小程序实现图片保存到相册功能的完整指南

一、选取图片并获取临时路径

1、首先需要在小程序中使用API来选取所需保存的图片,并通过success回调函数获取到这些图片的临时文件路径列表。

wx.chooseImage({
    success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        // 执行下一步操作
    }
})

2、依据具体需求,选择其中一张或多张图片进行操作。举例来说,选择一张图片并将其展示在页面上:

// HTML代码
<image src="{{imgUrl}}">

二、保存图片到相册

1、使用API可以将图片保存到手机相册中。调用该API时需要传入图片的临时路径,在success回调函数中可以做相应操作。

wx.saveImageToPhotosAlbum({
    filePath: tempFilePaths[0],
    success: function(res) {
        console.log('保存成功');
    },
    fail: function(res) {
        console.log('保存失败', res);
    }
})

2、在新版本的微信开发工具中,调用该API需要在app.json文件中"setting"字段中添加相关权限设置:

"mp-weixin": {
    "appid": "wx1111111111111",
    "setting": {
        "urlCheck": true,
        "es6": false,
        "enhance": false,
        "postcss": false,
        "preloadBackgroundData": false,
        "functionalPages": false,
        "minified": false,
        "requestDomain": [],
        "wsRequestDomain": [],
        "uploadDomain": [],
        "downloadDomain": [],
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息将用于小程序定位功能"
            }
        },
        "sitemapLocation": "sitemap.json"
    }
}

三、完整示例代码

综合以上两部分,下面给出一个完整的示例代码:

<view class="container">
    <view class="btn" bindtap="saveImage">保存图片</view>
    <image src="{{imgUrl}}"> 

四、注意事项

1、在进行图片保存操作时,请确认已经向用户申请了相应的授权,否则操作失败;

2、在调用saveImageToPhotosAlbum时,需确保传入的图片路径存在且正确;

3、在进行图片选取操作时,建议按照小程序官方文档要求的姿势实现;

4、在保存图片到相册时,需要暂停所有音视频的播放。