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;
	}
}
相关推荐
万岳软件开发小城34 分钟前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
anyup19 小时前
uni-app 蓝牙打印:实现数据分片传输机制
前端·uni-app·trae
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
Monly211 天前
Uniapp:navigator(页面跳转)
uni-app
Monly212 天前
Uniapp:swiper(滑块视图容器)
uni-app
七七小报2 天前
uniapp-商城-32-shop 我的订单-订单详情和组件goods-list
uni-app
Monly212 天前
Uniapp:view容器(容器布局)
uni-app
上趣工作室2 天前
uniapp开发2--uniapp中的条件编译总结
uni-app
@泽栖2 天前
下载HBuilder X,使用uniapp编写微信小程序
微信小程序·小程序·uni-app
程序员王天2 天前
Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
微信小程序·uni-app