微信小程序点击保存图片到本机功能

下面是实现微信小程序中点击保存图片到本机的完整攻略。为了更好地演示，我将以“点击保存图片到本机”按钮实现该功能。

1. 准备工作

在对话框中提到的实现步骤中，需要使用到以下两个组件：button和image。

在小程序中引入组件需要使用组件标签，示例如下：

<button></button>
<image></image>

2. 实现方法

我们可以通过wx.canvas.toTempFilePath接口将画布上的内容生成临时文件路径，接着利用wx.saveImageToPhotosAlbum将该路径对应的图片保存到相册中，具体代码如下：

<button type="primary" bindtap="handleSaveImage">点击保存图片到本机</button>
<image src="{{ imageSrc }}"></image>

// 实现方法
handleSaveImage: function() {
  var _this = this;
  wx.canvas.toTempFilePath({
    canvasId: 'myCanvas',
    success: function(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function(res) {
          wx.showModal({
            content: '图片保存成功',
            showCancel:false,
            confirmColor: '#3CC51F',
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
        },
        fail: function(res) {
          console.log(res)
        }
      })
    },
    fail: function(res) {
      console.log(res)
    }
  })
}

在这段代码中，我们在button组件设置bindtap事件，该事件将调用handleSaveImage方法。在handleSaveImage方法中，我们使用wx.canvas.toTempFilePath方法将画布上的图片生成临时文件路径，并将路径作为参数传递给wx.saveImageToPhotosAlbum方法，在该方法中我们使用该路径将图片保存到相册中。如果保存成功，我们通过wx.showModal方法提示用户保存成功。

3. 示例

示例1：单击保存图片按钮，将一个QrCode保存到用户的相册中。

<button type="primary" bindtap="handleSaveImage">点击保存二维码图片到本机</button>
<image src="{{ imageSrc }}"></image>

// 实现方法
handleSaveImage: function() {
  var _this = this;
  wx.canvas.toTempFilePath({
    canvasId: 'myCanvas',
    success: function(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function(res) {
          wx.showModal({
            content: '二维码图片保存成功',
            showCancel:false,
            confirmColor: '#3CC51F',
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
        },
        fail: function(res) {
          console.log(res)
        }
      })
    },
    fail: function(res) {
      console.log(res)
    }
  })
}

示例2：单击保存图片按钮，将一个由url指定的网络图片保存到用户的相册中。

<button type="primary" bindtap="handleSaveImage">点击保存网络图片到本机</button>
<image src="{{ imageSrc }}"></image>

// 实现方法
handleSaveImage: function() {
  var _this = this;
  wx.downloadFile({
    url: 'http://example.com/image.png',
    success:function(res){
      console.log('downloadFile success, res is', res);
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: function(res) {
          wx.showModal({
            content: '网络图片保存成功',
            showCancel:false,
            confirmColor: '#3CC51F',
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
        },
        fail: function(res) {
          console.log(res)
        }
      })
    },
    fail:function(res){
      console.log('downloadFile fail');
      console.log(res);
    }
  })
}

在这两个示例中，我们通过canvas将图片生成临时文件路径，接着通过wx.saveImageToPhotosAlbum方法将该路径指向的图片保存到相册中，从而实现了点击保存图片到本机的功能。