call failed:, {"errMsg": "canvasToTempFilePath:fail invalid viewId"}蘋果設備保存離屏 canvas 問題

背景介紹

在使用 uniapp 開發微信小程序海報功能，使用了 微信小程序的 createOffscreenCanvas創建離屏 canvas 實例。蘋果設備保存圖片到相冊報錯

call failed:, {"errMsg": "canvasToTempFilePath:fail invalid viewId"}

相關網站

• 離屏 canvas 實例： https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html
• 文件管理器：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.getFileSystemManager.html
• 寫文件：https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.writeFile.html

注意事項

1. 微信小程序 canvas.createImage() 創建圖片對象只能 onload 一次，下次還加載相同可能導致渲染不成功，所以可以在圖片鏈接上加時間戳來解決次問題

   1. const cover = canvas.createImage()
      // 等待圖片加載
      await new Promise(resolve => {
          cover.onload = resolve
          cover.src = this.cover + "?t=" + Date.now()
      })
      

2. 離屏 canvas uni-app 下不顯示，應該不支持

解決方案

canvas 是可以直接轉 base64 數據，在 image 標簽直接渲染的。所以這里保存 base64 文件到本地，再保存到相冊。

// ……省略非關鍵代碼
// 1、創建離屏 canvas 實例
const canvas = uni.createOffscreenCanvas({
    type: '2d',
    width: width,
    height: height
})
// 2、將畫布轉 base64 數據
this.imageData = canvas.toDataURL();
this.canvasData = canvas;

// ……省略非關鍵代碼

// 保存文件代碼
const fs = wx.getFileSystemManager()
const data = this.imageData.split(',')[1];
const path = `${wx.env.USER_DATA_PATH}/canvas.png`;
// 寫入本地文件
fs.writeFile({
    filePath: path,
    data: data,
    encoding: 'base64',
    success(res) {
        uni.saveImageToPhotosAlbum({ // 保存相冊
            filePath: path,
            success(ress) {
                uni.showToast({
                    icon: 'success',
                    mask: true,
                    title: '保存成功',
                });
            },
            fail: (err) => {
                console.log('err', err);
            }
        })
    },
    fail(res) {
        console.error(res)
    }
})