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


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 鼠标滚轮事件
Apr 09 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 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
php实现的ping端口函数实例
2014/11/12 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
JavaScript 巧学巧用
2017/05/23 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python判断变量是否为列表的方法
2020/09/17 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
香港交友网站:be2香港
2018/07/22 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
出国签证在职证明范本
2014/11/24 职场文书
置业顾问岗位职责
2015/02/09 职场文书
python 中yaml文件用法大全
2021/07/04 Python