首先是在wxml页面的处理,我的宽高设历此置的是自适应宽高,只需改成自己的宽毁烂衡高即可,关键部分是加一个判断 wx:if="{{!canvasImg}}"纤做
然后是js页面,d框结束时直接 canvasImg=null 即可
参考 https://blog.csdn.net/weixin_45272449/article/details/101295243?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242
在wxml中添加<canvas></canvas>组件。注意,这里必须要给id属性,style属性中必须有饥孙width和height。关于width和height的值,有个技巧就是width为100%,height为window高度。
获取window的高度,宽度,和像素比例。
写画图方法。新建canvas的上下文环境context,通过画window大小的矩形来设置背景色为#ffffff,老肢饥将图片插入到canvas中(注意left,top,width,height等参数),将文本插入到canvas中。最后调用wx.drawCanvas()来将图形和文字绘制出来。
在onReady中准备好图片(因为后期需要长按保存,所以需要使用https下图片,这里先下载到缓存中),调用前面定义绘图方法。
图片生成侍返,在真机(注意一定要在真机上测试,因为经常会出现开发工具中是好的,但是真机不能画出来的问题,一定要注意!)上测试也通过,OK啦。(这里不贴手机上的截图了)。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)