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;
	}
}
相关推荐
shmily ....3 小时前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
小阿技术5 小时前
uniapp制作一个个人页面
uni-app
小阿技术5 小时前
uniapp制作一个视频播放页面
uni-app
小周同学:10 小时前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
书山有路勤为径~12 小时前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_424409191 天前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918411 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手1 天前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_11 天前
搭建商城系统
java·uni-app·php
合作小小程序员小小店1 天前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app