uniapp中使用原生canvas标签绘制视频帧来模拟拍照,拍照后将图绘制在另外一个canvas上编辑画图,这样反复操作

uniapp中使用原生canvas标签绘制视频帧来模拟拍照,拍照后将图绘制在另外一个canvas上编辑画图,这样反复操作会导致ios系统上白屏,canvas2d上下文为null,经查阅找到相关资料
IOS 创建Canvas过多导致getContext('2d') 返回null
总 Canvas 内存使用超过最大限制 (Safari 12)
从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理

可以提供一些启发解决思路,最终在项目中这样解决的

bash 复制代码
beforeDestroy() {
	this.timer && clearInterval(this.timer);
	this.closeCamera()
	this.video = null
	if(this.canvas){
		this.canvas.width = 0
		this.canvas.height = 0
		this.canvas = null
		this.canvas2d = null
	}
	if(this.cameraCanvas){
		this.cameraCanvas.width = 0
		this.cameraCanvas.height = 0
		this.cameraCanvas = null
		this.cameraCanvas2d = null
	}
},

项目中还用了fabricjs,同样需要

bash 复制代码
fabricCanvasDispose() {
	console.log('释放内存')
	if (this.fabricCanvas) {
		let el = this.fabricCanvas.getElement()
		this.fabricCanvas.dispose();
		el.remove()
		this.fabricCanvas = null;
	}
	if (this.canvas) {
		this.canvas.width = 0
		this.canvas.height = 0
		this.canvas = null;
		this.canvas2d = null;
	}
}
相关推荐
CHB18 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23333 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮3 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬4 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106324 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode