微信小程序-生成海报-canvas-卡顿闪退

504 阅读1分钟

需求:生成海报,分享,保存

所用API:

wx.setClipboardData(剪切板)
wx.saveImageToPhotosAlbum(保存图片到本地相册)
wx.showShareImageMenu(分享图片:会调起小程序浮层,包含分享朋友,收藏,保存图片)
wx.canvasToTempFilePath(将绘制的canvas转成图片,并返回路径)

直接上代码:

carbon.png

大体效果

1adc30eeff8531cb5cd1a685180fe66.png

要点:

1.canvas绘制方法有变化,基础库不低于2.16.1时可用最新语法

2.canvas加载图片方法有变动,注意同步异步的差异,若将小图或文字放于大图之上,需在onload回调里面进行书写,否则会被覆盖

3.加载图片可用promise封装,使用promise.all监测图片是否全部加载完毕再使用wx.canvasToTempFilePath生成图片,否则生成的图片可能有部分遗漏

重大问题:频繁携带不同参数进入该页面使用canvas并生成不同图片,出现了卡顿及闪退现象

分析:canvas占用内存,系统并没有自动销毁,内存泄漏导致崩溃

解决方法:定义全局变量,使用wx:if控制canvas的销毁创建,离开页面时要销毁,图片生成之后要销毁