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


Posted in Javascript onJuly 25, 2019

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承的实现
Jul 09 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 #Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 #Javascript
JS查找孩子节点简单示例
Jul 25 #Javascript
微信小程序自定义单项选择器样式
Jul 25 #Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 #Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP发送短信代码分享
2015/08/11 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
浅谈php://filter的妙用
2019/03/05 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
js断点调试经验分享
2017/12/08 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python类共享变量操作
2020/09/03 Python
银行招聘自荐信
2015/03/06 职场文书
写给同事的离职感言
2015/08/04 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电