最近一直在开发小程序,做了一个自动抠图的功能。很多人可能需要将照片的背景去除,但是又不会ps怎么办?这个一键抠图就是解决这个问题。

我的预想是将自动抠图的照片保存为output_原文件名的形式。所以有了以下代码步骤: wx.downloadFile -> wx.getFileSystemManager().rename -> wx.saveImageToPhotosAlbum

原代码方法:

downloadImage() {  
    const that = this;  
    if (!this.data.resultImageSrc) {  
        wx.showToast({  
            title: '没有可下载的图片',  
            icon: 'none'  
        });  
        return;  
    }  
  
    const fileName = app.utils.extractFileNameFromUrl(this.data.resultImageSrc);  
  
    wx.downloadFile({  
        url: this.data.resultImageSrc,  
        success(res) {  
            if (res.statusCode === 200) {  
                const tempFilePath = res.tempFilePath;  
                const newFilePath = `${wx.env.USER_DATA_PATH}/${fileName}`;  
  
                wx.getFileSystemManager().rename({  
                    oldPath: tempFilePath,  
                    newPath: newFilePath,  
                    success() {  
                        wx.saveImageToPhotosAlbum({  
                            filePath: newFilePath,  
                            success() {  
                                wx.showToast({  
                                    title: '图片下载成功',  
                                    icon: 'success'  
                                });  
                            },  
                            fail() {  
                                wx.showToast({  
                                    title: '保存图片失败',  
                                    icon: 'none'  
                                });  
                            }  
                        });  
                    },  
                    fail() {  
                        wx.showToast({  
                            title: '重命名文件失败',  
                            icon: 'none'  
                        });  
                    }  
                });  
            } else {  
                wx.showToast({  
                    title: '下载图片失败',  
                    icon: 'none'  
                });  
            }  
        },  
        fail() {  
            wx.showToast({  
                title: '请求下载失败',  
                icon: 'none'  
            });  
        }  
    });  
}

在开发环境中测试是正常的,图片能够正常重命名并且也能够下载下来。结果上线后发现实际并不能正常下载😂

一翻查找资料之后发现保存系统相册重命名还不能使用wx.getFileSystemManager().rename,遂对代码进行调整如下:

wx.downloadFile({  
    url: this.data.resultImageSrc,  
    filePath: `${wx.env.USER_DATA_PATH}/${fileName}`,  
    success(res) {  
        if (res.statusCode === 200) {  
            const tempFilePath = res.filePath;  
            wx.saveImageToPhotosAlbum({  
                filePath: tempFilePath,  
                success() {  
                    wx.showToast({  
                        title: '图片下载成功',  
                        icon: 'success'  
                    });  
                },  
                fail() {  
                    wx.showToast({  
                        title: '保存图片失败',  
                        icon: 'none'  
                    });  
                }  
            });  
        } else {  
            wx.showToast({  
                title: '下载图片失败',  
                icon: 'none'  
            });  
        }  
    },  
    fail() {  
        wx.showToast({  
            title: '请求下载失败',  
            icon: 'none'  
        });  
    }  
});

主要区别就是去除了wx.getFileSystemManager().rename这个重命名方法,而是直接在wx.downloadFile中添加重命名的文件名称即可。