2020-08-29 Uniapp APP端、小程序长按图片保存

有些人私信问为什么没有H5的？因为H5只要提示用户长按保存图片就可以了，浏览器自带保存图片功能。

<!-- #ifdef APP-PLUS -->
<image :src="图片地址"  mode="aspectFill" @longpress="savePhoto(图片地址)"/>
<!-- #endif -->
<!-- #ifdef MP -->
<image :src="图片地址"  mode="aspectFill" @longpress="savePosterPath(图片地址)"/>
<!-- #endif -->

APP保存图片

// APP保存图片
    savePhoto(url) {
      // 先下载图片
      uni.downloadFile({
        url,
        success: (res) => {
          // 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: "保存成功！",
              });
            },
            fail: () => {
              uni.showToast({
                title: "保存失败",
              });
            },
          });
        },
      });
    },

小程序保存图片（授权后保存）

// 小程序保存图片
    savePosterPath(url) {
      uni.downloadFile({
        url,
        success: (resFile) => {
          console.log(resFile, "resFile");
          if (resFile.statusCode === 200) {
            uni.getSetting({
              success: (res) => {
                if (!res.authSetting["scope.writePhotosAlbum"]) {
                  uni.authorize({
                    scope: "scope.writePhotosAlbum",
                    success: () => {
                      uni.saveImageToPhotosAlbum({
                        filePath: resFile.tempFilePath,
                        success: (res) => {
                          return uni.showToast({
                            title: "保存成功！",
                          });
                        },
                        fail: (res) => {
                          return uni.showToast({
                            title: res.errMsg,
                          });
                        },
                        complete: (res) => {},
                      });
                    },
                    fail: () => {
                      uni.showModal({
                        title: "您已拒绝获取相册权限",
                        content: "是否进入权限管理，调整授权？",
                        success: (res) => {
                          if (res.confirm) {
                            uni.openSetting({
                              success: (res) => {
                                console.log(res.authSetting);
                              },
                            });
                          } else if (res.cancel) {
                            return uni.showToast({
                              title: "已取消！",
                            });
                          }
                        },
                      });
                    },
                  });
                } else {
                  uni.saveImageToPhotosAlbum({
                    filePath: resFile.tempFilePath,
                    success: (res) => {
                      return uni.showToast({
                        title: "保存成功！",
                      });
                    },
                    fail: (res) => {
                      return uni.showToast({
                        title: res.errMsg,
                      });
                    },
                    complete: (res) => {},
                  });
                }
              },
              fail: (res) => {},
            });
          } else {
            return uni.showToast({
              title: resFile.errMsg,
            });
          }
        },
        fail: (res) => {
          return uni.showToast({
            title: res.errMsg,
          });
        },
      });
    },

补充：APP和小程序保存base64图片到本地的方法

saveBase64Img(base64) {
// #ifdef APP-PLUS
      let imageStr = "data:image/png;base64," + base64;
      // 保存到本地
      let bitmap = new plus.nativeObj.Bitmap("goods_poster");
      bitmap.loadBase64Data(
        imageStr,
        () => {
          console.log("加载Base64图片数据成功");
          bitmap.save(
            "_doc/goods_poster.png",
            {},
            (i) => {
              console.log("保存图片成功：" + JSON.stringify(i));
              bitmap.clear();
            },
            (e) => {
              onsole.log("保存图片失败：" + JSON.stringify(e));
              bitmap.clear();
            }
          );
        },
        (e) => {
          console.log("加载Base64图片数据失败：" + JSON.stringify(e));
          bitmap.clear();
        }
      );
// #endif
// #ifdef MP
      var fileManager = uni.getFileSystemManager();
      fileManager.writeFile({
        filePath: "/img.jpg", // 指定图片的临时路径
        data: base64, // 要写入的文本或二进制数据
        encoding: "base64", // 指定写入文件的字符编码
        success: (res) => {
          console.log("写入文件成功，文件路径信息为：", res);
          转换本地路径成功后这里可以用上面的图片保存方法
        },
        file: (err) => {
          console.log("写入文件失败", err);
        },
      });
// #endif
}