小程序中将base64图片保存到相册中的方法介绍

介绍

在小程序中实现将base64格式的图片保存到相册功能非常常见，本文将为大家介绍如何实现这一功能。

步骤

第一步：将图片转换为临时文件路径

在小程序中，我们需要将base64格式的图片转换为图片临时文件路径，然后才能保存到相册中。

这个过程需要使用到小程序内置的API-wx.canvasToTempFilePath()。

wx.canvasToTempFilePath({

          width,
          height,
          destWidth,
          destHeight,
          canvasId,
          success: (res) => {},
          fail: (e) => {} 
 })

其中，canvasId指的是 canvas-id, 而且在通过wx.createSelectorQuery().select()获取canvas对象。

width 与 height表示画布的大小，即canvas标签中定义的宽高。

destWidth 与 destHeight 表示：输出图片的大小，可以做到按照比例缩放输出图片，避免输出图片过大，超出限制。

在 success 函数回调中，返回图片路径。下面是一个示例：

wx.canvasToTempFilePath({

    canvasId: 'myCanvas',
    destWidth: 300,
    destHeight: 150,
    success: function(res) {
        console.log(res.tempFilePath);
    }
});

第二步：保存到相册中

第一步成功后，我们已经拿到了图片的临时文件路径，接下来就是将其保存到相册中的过程了。

保存图片到相册中需要使用到内置API-wx.saveImageToPhotosAlbum()让用户授权后才能调用此功能。

wx.saveImageToPhotosAlbum({

    filePath,
    success: function (res) {
        console.log(res);
    },
    fail: function (err) {
        console.log(err);
    }
});

这个API的最主要的参数就是需要发保存到相册中的图片临时文件路径，另外，因为保存图片到相册中需要用户授权，所以此API需要在用户授权后才可以使用。用户必须授权方可调用此API，否则返回fail auth deny提示。

第三步：完整代码示例

下面为大家提供一个完整的代码示例：

// base64图片转化为临时文件路径

wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    destWidth: 300,
    destHeight: 150,
    success: function (res) {
        // 保存图片到相册中
        wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
                console.log(res);
            },
            fail: function (err) {
                console.log(err);
            }
        });
    },
    fail: function (err) {
        console.log(err);
    }
});

注意事项

1. 调用wx.saveImageToPhotosAlbum()前需要调用wx.authorize()，否则将不会有保存到相册的权限。

2. 调用wx.saveImageToPhotosAlbum()时，需要用户主动触发，比如button或getUserInfo。

总结

本文介绍了小程序中将base64图片保存到相册中的方法，具体内容包括了将图片转换为临时文件路径和将临时文件路径保存到相册中的步骤，以及代码示例和注意事项。希望本文能够对大家在小程序中实现此功能时提供一定的参考帮助。