call failed:, {"errMsg": "canvasToTempFilePath:fail invalid viewId"}苹果设备保存离屏 canvas 问题
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) } })
哇!又赚了一天人民币
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库