介绍
这篇文章给大家分享的是有关微信小程序如何绘制图片发送朋友圈的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
这种生成图片的效果是很常见的,实现起来也不难,跟原生js的差不多。需要注意的就是帆布标签上不要加太多的css,后果呢就是导致帆布不显示,还有呢就是帆布组件的优先级是最高的,所以会覆盖掉下面的所有内容,解决方法呢就是使用:
使用上面这两个组件是可以盖在画布上面的。
<强>注意:强>帆布绘制不支持网络图片,需要将网络图片保存成本地图片
, onLoad:,功能(选项),{ ,,,var grade =, options.grade; ,,,this.setData ({ ,,,,,等级:等级 ,,,}) ,,,this.loading (); , ,,},//才能检测,网络图片是否下载完成 加载才能:函数(),{ ,,,var _this =,; ,,,wx.showLoading ({ ,,,,,标题:,& # 39;生成中…& # 39;, ,,,}) ,,,timer =, setInterval(函数(),{ ,,,,,var avatarUrl =, _this.data.avatarUrl; ,,,,,var qc_code =, _this.data.qc_code; ,,,,,if (avatarUrl !=, null ,,, qc_code !=, null), { ,,,,,,,wx.hideLoading (); ,,,,,,,clearInterval(计时器); ,,,,,,,_this.draw (); ,,,,,} ,,,},,500) ,,},//保才能存到相册 ,,saveImage:函数(),{ ,,,var imagePath =, this.data.imagePath; ,,,wx.saveImageToPhotosAlbum ({ ,,,,,filePath:, imagePath, ,,,,,:成功,函数(res), { ,,,,,,,console.log (res) ,,,,,}, ,,,,,失败:,函数(res), { ,,,,,,,console.log (res) ,,,,,} ,,,}) , ,,},//将才能用户头像下载为本地路径 ,,downImage:函数(img), { ,,,var _this =,; ,,,wx.getImageInfo ({ ,,,,,src:, img, ,,,,,:成功,函数(res), { ,,,,,,,console.log (res.path) ,,,,,,,_this.setData ({ ,,,,,,,,,avatarUrl: res.path ,,,,,,,}) , ,,,,,} ,,,}) ,,},//下才能载小程序二维码 ,,downImage2: function (img), { ,,,var _this =,; ,,,wx.getImageInfo ({ ,,,,,src:, img, ,,,,,成功:,function (res), { ,,,,,,,console.log (res.path) ,,,,,,,_this.setData ({ ,,,,,,,,,qc_code: res.path ,,,,,,,}) , ,,,,,} ,,,}) ,,},//生才能成画布图片 ,,画:函数(),{ ,,,var _this =,; ,,,var context =, wx.createCanvasContext (& # 39; firstCanvas& # 39;); ,,,var userInfo =, wx.getStorageSync(& # 39;用户信息# 39;); ,,,var award ; ,,,//,性别 ,,,var gender =, userInfo.gender; ,,,//背景图片 ,,,var bg =, & # 39; . ./. ./图片/icon-cj.png& # 39;; ,,,//得分 ,,,var grade =, 0, ^, _this.data.grade; ,,,var 宽度; ,,,var 高度; ,,,if (grade 祝辞=,0,,,,grade & lt;=, 30), { ,,,,,如果(==gender 2) { ,,,,,,,award =, & # 39; . ./. ./图片/zbzxlp.png& # 39;; ,,,,,其他}{ ,,,,,,,award =, & # 39; . ./. ./图片/zbzxlg.png& # 39;; ,,,,,} ,,,}else 如果(grade 祝辞=,31岁,,,,grade & lt;=, 60) { ,,,,,if (==gender 2), { null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null null微信小程序如何绘制图片发送朋友圈