本文实例为大家分享了微信小程序绘制图片发送朋友圈的具体代码,供大家参考,具体内容如下
这种生成图片的效果是很常见的,实现起来也不难,跟原生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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]