uniapp中使用原生canvas标签绘制视频帧来模拟拍照,拍照后将图绘制在另外一个canvas上编辑画图,这样反复操作会导致ios系统上白屏,canvas2d上下文为null,经查阅找到相关资料
IOS 创建Canvas过多导致getContext(‘2d’) 返回null
总 Canvas 内存使用超过最大限制 (Safari 12)
从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理
可以提供一些启发解决思路,最终在项目中这样解决的文章来源:https://www.toymoban.com/news/detail-693139.html
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,同样需要文章来源地址https://www.toymoban.com/news/detail-693139.html
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;
}
}
到了这里,关于uniapp中使用原生canvas标签绘制视频帧来模拟拍照,拍照后将图绘制在另外一个canvas上编辑画图,这样反复操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!