小程序实现长按保存图片

首先是图片展示

      <image :src='invitationMainGraph' @longtap="bankImg" mode='widthFix' class='image'></image>

长按事件:@longtap="bankImg"

事件处理:保存,查看权限,打开权限

    // 保存到本地
    bankImg() {
      console.log(123, "==123===");
      if (this.canSaveAlbum == 0) {
        this.openSetting();
      } else {
        let that = this;
        console.log("11");
        uni.getSetting({
          success(res) {
            console.log(res.authSetting["scope.writePhotosAlbum"]);
            if (!res.authSetting["scope.writePhotosAlbum"]) {
              // 没有权限写入相册
              uni.authorize({
                scope: "scope.writePhotosAlbum",
                success() {
                  console.log("有权限");
                  that.saveImage();
                },
                fail() {
                  console.log("调用权限失败");
                  uni.showToast({
                    title: "保存相册权限未打开,请点击打开设置",
                    icon: "none",
                    duration: 2000,
                    complete() {
                      if ((that.canSaveAlbum = 0)) {
                        this.openSetting();
                      }
                      that.canSaveAlbum = 0;
                    },
                  });
                },
              });
            } else {
              console.log("有");
              // 有权限写入相册
              that.saveImage();
            }
          },
        });
      }
    },
    // 打开权限
    openSetting() {
      console.log("111");
      uni.openSetting({
        success(settingdata) {
          if (settingdata.authSetting["scope.writePhotosAlbum"]) {
            this.canSaveAlbum = 1;
            this.saveImage();
          } else {
            uni.showToast({
              title: "请允许使用保存图片权限",
              icon: "none",
            });
          }
        },
      });
    },
    // 保存海报
    saveImage() {
      uni.showLoading({
        title: "保存中...",
        mask: true,
      });
      uni.downloadFile({
        url: this.invitationMainGraph,
        success: function (res) {
          if (res.statusCode === 200) {
            let img = res.tempFilePath;
            uni.saveImageToPhotosAlbum({
              filePath: img,
              success(res) {
                uni.showToast({
                  title: "保存成功",
                  icon: "success",
                  duration: 2000,
                  complete() {
                    this.show = false;
                  },
                });
              },
              fail(res) {
                wx.showToast({
                  title: "保存失败",
                  icon: "none",
                  duration: 2000,
                });
              },
            });
          }
        },
      });
    },

还有移动端H5是自带长按保存的