小程序中使用canvas绘制多张网络图片的海报

在小程序中是不可以使用网络连接来进行绘制canvas的都会先把图片下载下载下来之后才可以进行绘制我们可以通过wwx.downloadFile或者wx.getImageInfo来进行吧图片进行下载,下载之后便可以进行绘制,话不多说直接上代码


首先封装了一个promise来进行图片的下载图片,你有多少张脱线就调用多少次这个方法.promise给了我们极大的方便不用在downloadFile一直回调来进行绘制图片了,刚开始我使用就是回调函数来进行绘制的那代码不忍直视,而且回调里好像就只能回绘制3张多了就画不出来我也不明白怎么回事.我的天啊,问题我要绘制4张图片,没办法最后在网上一直找终于找到了使用promise这个方法!!!,不仅简洁还解决了回调地狱的问题.


如果你还要兼容各个不同手机的屏幕大小的话还需要通过wx.getSystemInfo来监听屏幕宽高,用宽除以375会得到一个倍数,因为canvas的单位是px所以就要调成自适应用在你想绘制的图片后面乘以这个倍数即可兼容各种屏幕了


最后是核心代码,后来发现方法在onload中一进入页面就就调用绘制的方法,会绘制不出来,使用打印大法之后发现原来图片还没下载好就开始绘制了,所以我使用了定时器在3秒后在图片都下载好了之后再调用绘制的方法就成功了.


哈哈看到自己以前写的代码真的好搞笑,后面哪个一部的方法其实可以使用promise.all来实现等图片都执行完毕后再进行下载,可以吧每个下载事件的方法存在一个数组,再调用promise.all即可解决一部问题。

你可能感兴趣的:(小程序中使用canvas绘制多张网络图片的海报)