最近在做小程序开发时有个功能是要将一个报价单的页面能生成一张图片,让用户可保存到相册。由于本人接触小程序开发比较少,任务下来后就一直百度查资料,看小程序文档。最后的结论的就是"蒙圈”,网上查询的资料很多,可是都是让我看着似懂非懂的,最后还是无意间看见了wxa-plugin-canvasc这个插件,所以拿来就研究一下,发现正好符合我这个初级水平的理解,所以拿来测试了一下。写这篇博客只是将这个知识点记录一下,没有别的想法,如果对你有帮助,我感到很高心。。。
首先,我把wxa-plugin-canvasc这个插件的文档浏览了一遍,并在GitHub上下载了此插件测试了一下(感谢写此插件的大神),
地址为:https://github.com/jasondu/wxa-plugin-canvas
此文档写的比较细,有demo可以测试。大致用法在README.md文件下有说明,这里我就异步生成图片做已记录。因为我的报价单是根据不同的数据来生成不同数据的报价单图片,所以用到了异步加载生成图片的功能
在要生成图片的js文件中引入插件
在wxml文件中,通过事件来触发画图
然后在js文件中处理事件出发的函数:
通过前面传过来的id_num值,获取接口中的数据,在success成功返回的res中将画好的图片保存在去前面初始化的变量中;
其中:posterConfig部分的代码放在
最后图片生成后,会调用如下两个方法:
可以通过判断来让用户保存好生成的图片