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


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 相关文章推荐
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
react-navigation之动态修改title的内容
Sep 26 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
了解javascript中的Dom操作
May 27 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
基于JavaScript实现随机点名器
Feb 25 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
咖啡与牛奶
2021/03/03 冲泡冲煮
用PHP4访问Oracle815
2006/10/09 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
详解PHP中的PDO类
2015/07/06 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
Python写的一个简单监控系统
2015/06/19 Python
python MySQLdb使用教程详解
2018/03/20 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
美术毕业生求职信
2014/02/25 职场文书
2014年采购员工作总结
2014/11/18 职场文书
党性分析材料格式
2014/12/19 职场文书
家电创业计划书
2019/08/05 职场文书