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

2020-11-27 来源：乌哈旅游

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

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

显示全文

全部栏目

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