uniapp 保存图片到不同端

保存图片是手机端经常会遇到的场景，uni-app 中支持使用 uni.saveImageToPhotosAlbum API 保存图片到本地相册，需要注意的是：

• 这个 API 除了 H5 之外其它端均适用。所以在适配多平台时，要对 H5 端进行单独处理
• 小程序下获取网络图片信息需先配置 download 域名白名单才能生效
• 安卓、IOS、小程序端分别获取保存图片的权限

长按保存

<img @longtap="saveImg" />

如果无法保存，可以为图片样式添加 -webkit-touch-callout 属性

<canvas style="width: 100%;height:100%;">
    <img :src="url" style="-webkit-touch-callout: default;" @longtap="saveImg" />
</canvas>

结构

使用 ifdef ifndef 区分不同的端

APP 及 小程序端

使用 uni.saveImageToPhotosAlbum 来进行实现，其它具体参数可参考：uniapp.dcloud.net.cn/api/media/i…

代码实现：

uni.saveImageToPhotosAlbum({
    filePath: "",
    success: function () {
        uni.showToast({
            title: "保存成功！",
        });
    },
    fail: (res) => {
        uni.showToast({
                title: res.errMsg,
        });
    }
});

H5 端保存相册

由于 H5 不支持 saveImageToPhotosAlbum 方法，所以需要进行单独处理

saveImg(url) {
    var dom = document.createElement("a");
    dom.download = ''; // 设置下载的文件名
    dom.href = url;
    document.body.appendChild(dom);
    dom.click(); // 下载
    dom.remove(); // 删除创建的元素
},

如果图片不是本地图片，而是网络图片，需要在保存之前先下载图片，使用 uni.downloadFile 获取图片路径res.tempFilePath，成功后再在代码中加入上面的保存代码

uni.downloadFile({
    url:  url,
    header:{
        'X-Authorization': uni.getStorageSync('session.login')['token']
    },
    methods: 'GET',
    success: (res) => {
    },
    fail: () => {
       
    }
});

微信小程序获取授权

微信小程序需要获取授权后，再进行保存，搭配 uni.getSetting 和 uni.openSetting 使用。

其它

如果是生成海报保存到手机相册，可以使用 html2canvas 库将 DOM 转化成图片后再通过上述方式进行保存。

其他图片相关的 API：