如何制作国旗头像,微信小程序利用 canvas 绘制挂件头像_稚终_前端开发者

昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣。

请给我一面国旗@微信官方

1、canvas

1、canvas1、canvas

这就不得不提到小程序中的 API canvas,H5 中也是有 canvas 的,不过之前也一直没有机会用,这次正好乘机试试水。

 canvas,H5 中也是有 canvas 的,不过之前也一直没有机会用,这次正好乘机试试水。canvas

晚上回家看了下官方文档,网上搜了一些类似的功能实现,最后写好了一个 demo,基本上是能初步绘制国旗头像了。

当然以后如果想要绘制其他带挂件的头像,只需要更改挂件素材即可,提前预约帮你们定做今年的圣诞帽。

 

2、代码来了

2、代码来了2、代码来了

实现过程主要分为以下几个步骤:

1、新建 canvas 画板

2、绘制头像当做背景(demo 目前是自行上传头像制作)

3、绘制国旗边框

4、保存到手机相册(需授权)

废话不多说,直接上代码:

// wxml 页面
<view class="container">
  <!-- 头像绘制区域 -->
  <canvas canvas-id="myAvatar" class="canvas"></canvas>

  <!-- 按钮 -->
  <button class="btn-save" bindtap="upload">上传头像</button>
  <button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button>
</view>
// wxml 页面
<view class="container">
  <!-- 头像绘制区域 -->
  <canvas canvas-id="myAvatar" class="canvas"></canvas>

  <!-- 按钮 -->
  <button class="btn-save" bindtap="upload">上传头像</button>
  <button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button>
</view>

// wxml 页面
<view class=”container”><!– 头像绘制区域 –><canvas canvas-id=”myAvatar” class=”canvas”></canvas><!– 按钮 –><button class=”btn-save” bindtap=”upload”></button><button disabled=”{{ !save }}” class=”btn-save” bindtap=”saveImg”></button></view>

// 部分功能 js
// 绘制头像背景
drawAvatar() {
  var that = this;
  var p = that.data;
  context = wx.createCanvasContext('myAvatar', this);
  context.drawImage(p.src, 0, 0, 256, 256);
  context.draw(true)
  context.save();
  context.translate(p.hat.x, p.hat.y)
  context.scale(p.hat.b, p.hat.b)
  context.rotate(p.hat.rotate * Math.PI / 180)
  context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)
  context.draw(true)
  this.setData({
    save: true
  })
},

// 保存图片
saveImg() {
  wx.canvasToTempFilePath({
    canvasId: 'myAvatar',
    success(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          wx.showToast({
            title: '保存成功'
          })
        },
        fail(res) {
          wx.showToast({
            title: '取消保存...',
            icon: 'none'
          })
        }
      })
    }
  })
}
// 部分功能 js
// 绘制头像背景
drawAvatar() {
  var that = this;
  var p = that.data;
  context = wx.createCanvasContext('myAvatar', this);
  context.drawImage(p.src, 0, 0, 256, 256);
  context.draw(true)
  context.save();
  context.translate(p.hat.x, p.hat.y)
  context.scale(p.hat.b, p.hat.b)
  context.rotate(p.hat.rotate * Math.PI / 180)
  context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)
  context.draw(true)
  this.setData({
    save: true
  })
},

// 保存图片
saveImg() {
  wx.canvasToTempFilePath({
    canvasId: 'myAvatar',
    success(res) {
      wx.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(res) {
          wx.showToast({
            title: '保存成功'
          })
        },
        fail(res) {
          wx.showToast({
            title: '取消保存...',
            icon: 'none'
          })
        }
      })
    }
  })
}

// 部分功能 js
// 绘制头像背景
drawAvatar() {
var that = this;
var p = that.data;
context = wx.createCanvasContext(‘myAvatar’, this);
context.drawImage(p.src, 0, 0, 256, 256);
context.draw(true)
context.save();
context.translate(p.hat.x, p.hat.y)
context.scale(p.hat.b, p.hat.b)
context.rotate(p.hat.rotate * Math.PI / 180)
context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)
context.draw(true)
this.setData({
save: true
})
},

// 保存图片
saveImg() {
wx.canvasToTempFilePath({
canvasId: ‘myAvatar’,
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: ‘保存成功’
})
},
fail(res) {
wx.showToast({
title: ‘取消保存…’,
icon: ‘none’
})
}
})
}
})
}

 

3、最后

3、最后3、最后

demo 写完了,以小程序的尿性,怎么会没有坑呢?发现真相的我眼泪差点掉下来,而且这个坑不是一般的坑,弄了老半天都没解决。

具体是啥坑小程序留言区揭晓,感兴趣的欢迎来留言讨论如何解决,到发文为止依旧是个巨坑。

公众号「我是玖柒后」后台回复「头像」即可获取 demo 源码,填坑不忘挖坑人,我太南了。

demo 源码

 

 推荐文章:

推荐文章:

小程序九九八十一坑之跳转传参

小程序九九八十一坑之跳转传参

» 本文来自:前端开发者 » 《如何制作国旗头像,微信小程序利用 canvas 绘制挂件头像_稚终_前端开发者》
» 本文链接地址:https://www.rokub.com/73397.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!