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

2019-11-19 11:08:06

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了微信小程序绘制图片发送朋友圈的具体代码，供大家参考，具体内容如下

这种生成图片的效果是很常见的，实现起来也不难，跟原生js的差不多。需要注意的就是canvas标签上不要加太多的css，后果呢就是导致canvas不显示，还有呢就是canvas组件的优先级是最高的，所以会覆盖掉下面的所有内容，解决方法呢就是使用：

使用上面这两个组件是可以盖在canvas上面的。

注意：canvas绘制不支持网络图片，需要将网络图片保存成本地图片

 onLoad: function(options) {    var grade = options.grade;    this.setData({      grade: grade    })    this.loading();   },  //检测，网络图片是否下载完成  loading: function() {    var _this = this;    wx.showLoading({      title: '生成中...',    })    timer = setInterval(function() {      var avatarUrl = _this.data.avatarUrl;      var qc_code = _this.data.qc_code;      if (avatarUrl != null && qc_code != null) {        wx.hideLoading();        clearInterval(timer);        _this.draw();      }    }, 500)  },  //保存到相册  saveImage: function() {    var imagePath = this.data.imagePath;    wx.saveImageToPhotosAlbum({      filePath: imagePath,      success: function(res) {        console.log(res)      },      fail: function(res) {        console.log(res)      }    })   },  //将用户头像下载为本地路径  downImage: function(img) {    var _this = this;    wx.getImageInfo({      src: img,      success: function(res) {        console.log(res.path)        _this.setData({          avatarUrl: res.path        })       }    })  },  //下载小程序二维码  downImage2: function (img) {    var _this = this;    wx.getImageInfo({      src: img,      success: function (res) {        console.log(res.path)        _this.setData({          qc_code: res.path        })       }    })  },  //生成canvas图片  draw: function() {    var _this = this;    var context = wx.createCanvasContext('firstCanvas');    var userInfo = wx.getStorageSync('userInfo');    var award ;    // 性别    var gender = userInfo.gender;    //背景图片    var bg = '../../images/icon-cj.png';    //得分    var grade = 0 ^ _this.data.grade;    var width;    var height;    if (grade >= 0 && grade <= 30) {      if(gender == 2){        award = '../../images/zbzxlp.png';      }else{        award = '../../images/zbzxlg.png';      }    }else if(grade >= 31 && grade <= 60){      if (gender == 2) {        award = '../../images/zklp.png';      } else {        award = '../../images/zklg.png';      }    } else if (grade >= 61 && grade <= 80){      if (gender == 2) {        award = '../../images/zmlp.png';      } else {        award = '../../images/whlg.png';      }    }else{      if (gender == 2) {        award = '../../images/wmlp.png';      } else {        award = '../../images/wmlg.png';      }    }      if (award == '../../images/zbzxlp.png' || award == '../../images/zbzxlg.png'){      width = 156;      height= 25;    }else{      width = 103;      height = 25;    }      //二维码    var qc_code = _this.data.qc_code;    // 用户头像    var avatarUrl = _this.data.avatarUrl;    //获取设备的基本信息    wx.getSystemInfo({      success: function(res) {        //绘制背景图        context.drawImage(bg, 0, 0, 350, 468);        // 绘制奖项        context.drawImage(award,180 - (width / 2),212 - (height / 2),width,height);        //绘制二维码        context.drawImage(qc_code, 175 - (92 / 2), 385 - (108 / 2), 92, 107);        //绘制得分        context.setFontSize(28); //字体大小        context.fillStyle = '#4fc089';        context.setTextAlign('center')        context.fillText(grade, 177, 48)        // 绘制姓名        context.setFontSize(16);        context.fillStyle = '#000000';        context.setTextAlign('center')        context.fillText(userInfo.nickName, 167, 180);        // 绘制头像        context.drawImage(avatarUrl, 72, 157, 33, 33);         context.draw(false, function() {          setTimeout(function() {            wx.canvasToTempFilePath({              width: 350,              height: 468,              destWidth: 700,              destHeight: 936,              canvasId: 'firstCanvas',              success: function(res) {                var tempFilePath = res.tempFilePath;                console.log("图片"+tempFilePath);                _this.setData({                  imagePath: tempFilePath,                  isCanvas: true                });                _this.upload(tempFilePath);               },              fail: function(res) {                console.log(res);              }            });          }, 1000);        });      },    })  },

因为我的项目需要，我上面做个很多判断，那些东西不需要管，重点就是，绘制图片drawimage方法和绘制文字的方法，我的绘制方法是让他们根据canvas上的一个坐标点居中绘制的，这个可以看一下。

还有就是，生成图片的尺寸要比画的尺寸大一倍，这样图片不会失真，比较清楚，也就是这个方法：

wx.canvasToTempFilePath() 前两个参数是canvas的大小，然后是生成图片的大小，canvas的ID

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详细教你微信公众号正文页SVG交互开发技巧

下一篇：微信小程序使用canvas自适应屏幕画海报并保存图片功能