微信小游戏截图并保存到手机相册

微信小游戏里实现截图并保存到手机相册，核心就三步：拿到当前界面的 Canvas、转成临时图片文件、调用微信的保存接口。麻烦的地方在于授权流程的处理——如果用户之前拒绝过相册权限，需要引导用户手动开启。下面用 Laya 引擎的写法走一遍完整流程，非 Laya 引擎的思路一样，只是获取 Canvas 的方式不同。

第一步：获取当前界面的 Canvas

用 Laya 的话，drawToCanvas 可以把舞台绘制到一个离屏 Canvas 上：

javascript

var canvas = Laya.stage.drawToCanvas(
  Laya.stage.width,
  Laya.stage.height,
  0, 0
).getCanvas();

如果你用的是原生小游戏开发（不依赖 Laya），直接拿 canvas 全局变量就行，不需要这一步。

第二步：Canvas 转临时文件

用 toTempFilePathSync 把 Canvas 内容保存为临时图片：

javascript

var tempFilePath = canvas.toTempFilePathSync({
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  destWidth: 100,
  destHeight: 100,
  fileType: 'jpg',
  quality: 1.0
});

width 和 height 是从 Canvas 上截取的区域，destWidth 和 destHeight 是输出图片的实际尺寸。想保存高清截图就把这两个值设大一点。

生成出来的 tempFilePath 本质上就是一个本地图片路径，可以直接用来分享或保存。

第三步：保存到相册（含授权处理）

这一步是重点。微信小游戏保存图片需要用户授权 scope.writePhotosAlbum，而授权可能被拒绝过，所以需要处理三种情况：已授权直接保存、未授权引导授权、拒绝过引导去设置页手动开启。

javascript

wx.authorize({
  scope: 'scope.writePhotosAlbum',
  success: function (res) {
    // 已授权，直接保存
    saveToAlbum(tempFilePath);
  },
  fail: function () {
    // 未授权或之前拒绝过，弹窗引导用户去设置
    wx.showModal({
      title: '授权提示',
      content: '保存截图需要相册权限，请在设置中开启',
      showCancel: true,
      cancelText: '取消',
      confirmText: '去授权',
      success: function (modalRes) {
        if (modalRes.confirm) {
          wx.openSetting({
            success: function (settingRes) {
              // 用户在设置页开启了权限后，再调一次保存
              if (settingRes.authSetting['scope.writePhotosAlbum']) {
                saveToAlbum(tempFilePath);
              }
            }
          });
        }
      }
    });
  }
});

function saveToAlbum(filePath) {
  wx.saveImageToPhotosAlbum({
    filePath: filePath,
    success: function () {
      wx.showToast({
        title: '截图已保存到相册',
        icon: 'none',
        duration: 1500
      });
    },
    fail: function () {
      wx.showToast({
        title: '保存失败，请重试',
        icon: 'none',
        duration: 1500
      });
    }
  });
}

完整流程梳理

text

获取 Canvas → toTempFilePathSync 生成临时图片
  → wx.authorize 请求相册权限
    → 已授权 → saveImageToPhotosAlbum 保存
    → 未授权 → showModal 提示
      → 用户点去授权 → openSetting 打开设置页
        → 用户开启权限 → saveImageToPhotosAlbum 保存
      → 用户取消 → 什么都不做

常见问题

截图模糊：检查 destWidth 和 destHeight 是否设得太小，建议设为 Canvas 实际像素尺寸或更大。
getCanvas() 报错：Laya 不同版本 API 有变化，确认你用的版本支持 drawToCanvas。新版本可能需要用 Laya.stage.drawToCanvas 的不同参数签名。
ImageData is not defined：这个错误通常出现在浏览器调试环境，小游戏真机上一般不会出现。

字节笔记本

微信小游戏截图并保存到手机相册

第一步：获取当前界面的 Canvas

第二步：Canvas 转临时文件

第三步：保存到相册（含授权处理）

完整流程梳理

常见问题