微信小程序如何绘制图片发送朋友圈

  介绍

这篇文章给大家分享的是有关微信小程序如何绘制图片发送朋友圈的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

这种生成图片的效果是很常见的,实现起来也不难,跟原生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

微信小程序如何绘制图片发送朋友圈