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
注意事项
-
微信小程序
canvas.createImage()
创建图片对象只能onload
一次,下次还加载相同可能导致渲染不成功,所以可以在图片链接上加时间戳来解决次问题-
const cover = canvas.createImage() // 等待图片加载 await new Promise(resolve => { cover.onload = resolve cover.src = this.cover + "?t=" + Date.now() })
-
-
离屏
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)
}
})
- quot canvasToTempFilePath 苹果 invalid failedquot canvastotempfilepath苹果invalid canvastotempfilepath canvas fail uniapp canvas canvastotempfilepath fail程序 signature invalid config fail quot rtlvalidateheap specified invalid quot output时报invalid quot connection invalid gorm quot failed nerdctl bridge err_proxy_connection_failed quot connection nginx quot directory failed