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;
	}
}
相关推荐
ModyQyW10 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端2 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
today喝咖啡了吗2 天前
uniapp项目中node_modules\sass\sass.dart.js的体积过大怎么处理
javascript·uni-app·sass
遗憾随她而去.2 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰2 天前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app