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


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实现商品活动倒计时
Oct 16 Javascript
easyui validatebox验证
Apr 29 Javascript
js严格模式总结(分享)
Aug 22 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
Vue CL3 配置路径别名详解
May 30 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
Typescript类型系统FLOW静态检查基本规范
May 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
YII框架关联查询操作示例
2019/04/29 PHP
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python集合能干吗
2020/07/19 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Python 实现进度条的六种方式
2021/01/06 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
青蓝工程实施方案
2014/03/27 职场文书
安全口号大全
2014/06/21 职场文书
司机个人年终总结
2015/03/03 职场文书
国情备忘录观后感
2015/06/04 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python