用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序canvas绘制圆形微信头像

Rolan 2020-6-16 00:52

提醒:canvas画布绘画图片的时候,图片不能是互联网图片,必须是本地图片才可以正常绘制。 第一步:获取用户授权,下载微信头像图片到本地。pleaseSign: function(event) { wx.getSetting({ success(res) { if (res. ...

提醒:canvas画布绘画图片的时候,图片不能是互联网图片,必须是本地图片才可以正常绘制。

第一步:获取用户授权,下载微信头像图片到本地。

pleaseSign: function(event) {

    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              let userInfo = res.userInfo;
              let userImage = userInfo.avatarUrl;
              wx.downloadFile({
                url: userImage,
                success(wr) {
                  let userName = userInfo.nickName;
                  app.gData.userName = userName;
                  app.gData.userImage = wr.tempFilePath;
                  wx.navigateTo({
                    url: '../sign/sign'
                  });
                }
              });
            }
          });
        }
      }
    });
  }

获取用户头像信息之后,跳转到绘制页面,在绘制页面完成绘画操作。


第二步:绘制用户头像。

finish: function() {

    const ctx = wx.createCanvasContext('shareCanvas');
    let that = this;
    ctx.drawImage(app.gData.BG, 0, 0, 600, 1066);
    ctx.stroke();

    ctx.save();
    // 绘制第一个圆 
    ctx.beginPath();
    //圆心x、y的坐标,半径,起始角,结束角,顺时针画
    ctx.arc(30 + that.data.xp - 70, 30 + that.data.yp - 30, 30, 0, Math.PI * 2, false);
    //将圆形剪切
    ctx.clip();
    //再画一个不存在的圆,避免画出来的微信头像有个黑圆圈
    ctx.beginPath();
    ctx.arc(0, 0, 0, 0, Math.PI * 2, false);
    ctx.drawImage(app.gData.userImage, that.data.xp - 70, that.data.yp - 30, 60, 60);
    ctx.stroke();
    ctx.restore();

    ctx.setTextAlign('left');
    ctx.font = 'bold 25px 楷体';
    ctx.setFillStyle(app.gData.fontColor);
    ctx.fillText(app.gData.userName, that.data.xp, that.data.yp + 10);
    ctx.stroke();
    ctx.draw(false, function () {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 600,
        height: 1066,
        destWidth: 600,
        destHeight: 1066,
        canvasId: 'shareCanvas',
        success: function (res) {
          // 获得图片临时路径
          app.gData.temp = res.tempFilePath;
          app.gData.change = true;
          wx.navigateBack();
        }
      });
    });
    
  }
注意:在绘制用户头像之前一定要调用save方法,绘制以后调用restore方法,否则你的绘制除了头像会成功画出来,其它绘画图片或者文字会出不来。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 链诸葛财经 来自: 简书
  • longkun 2020-6-19 13:34
    专业微信小程序开发 app定制 欢迎各行老板来电 tel;13635483717同v