canvas只在需要触发的时候渲染,在用户没有点击保存按钮的时候,默认不渲染canvas。代码如下:由于小程序和MVVM框架类似,无法直接操作dom,所以vine采取了在样式上面添加状态,通过修改showcanvas变量的值,来控制canvas的显示和隐藏。在执行画图操作的时候使变量值为false,显示canvas,在绘制完成的时候更改变量值,隐藏canvas
<canvas canvas-id="shareQRcode"></canvas>
生成预览图片时间非常慢
生成预览图片时间非常慢,目前判断的原因是,直接预览canvas临时路径的图片耗时比较久。那么应该如何优化这个过程呢?
小程序的API提供了几个关于文件的接口:
我们可以通过这几个接口优化目前的预览方式。在这其中vine做了两种不同的尝试。
第一,在执行wx.previewImage的success的回调的时候,把previewImage生成的临时路径保存下来,下次再点击预览的时候,直接获取本地已保存的文件列表wx.getSavedFileList,取得最近保存下来的文件的本地路径,进行预览。这么做的想法主要是为了解决canvas渲染的问题,每天只渲染一次,后续都是通过预览本地图片链接达到生成图片的目的。梳理一下流程:
初次渲染:canvasToTempFilePath -> previewImage -> saveFile
二次渲染:getSavedFileList -> previewImage
可惜理想始终是丰满的,在实际操作的过程中vine发现,通过这样的方式预览图片的时候,一直处于loading的状态,无法生成初次渲染的图片。vine非常苦恼,至今没能找到原因。
于是vine想了另一种办法,调整了预览的顺序如下:
初次渲染:canvasToTempFilePath -> saveFile -> previewImage
二次渲染:getSavedFileList -> previewImage
这时候vine发现,先把canvas生成的临时路径保存到本地,再预览,这种方法是可行的!而且在二次渲染的过程中,由于只是读取小程序本地的图片路径,无需再次调用canvas绘图,二次预览的时间大大减少。
在这里我们需要注意官方文档中提到的一点:小程序本地文件存储的大小限制为10M。所以我们需要调用wx.removeSavedFiled的方法删除我们不需要的图片(当天之前存下来的图片都是我们无需保存到本地的图片,可以删除)
三星note5保存图片尺寸的问题
在数量庞大版本不一的安卓手机上,vine收到反馈,三星note5在保存图片的时候会遇到图片底部被裁减的情况。在通过多次修改以及对比类似的小程序以后发现,note5用canvas绘制的图片有一个最大的范围是750*1150,超出这个范围的图片,底部就会被裁减。为什么会有这个最大范围vine目前还没探索出结论,希望遇到过这个问题的大神可以和vine交流一下心得,手动比心!~
最后梳理一下小程序项目的一些注意点:
原文地址:每日出击运签小程序“踩坑”总结 | 微信公众平台 开发者社区