用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

教你制作掛件頭像 | 小程序七十二變之 canvas 繪制國旗頭像

Rolan 2019-10-15 00:32

朋友圈被「請給我一面國旗@微信官方」刷屏,雖然知道是假的,但是從另一個角度來看,弄清楚如何實現更有趣。1、canvas這就不得不提到小程序中的 APIcanvas,H5 中也是有 canvas 的,不過之前也一直沒有機會用,這次 ...

朋友圈被「請給我一面國旗@微信官方」刷屏,雖然知道是假的,但是從另一個角度來看,弄清楚如何實現更有趣。

1、canvas

這就不得不提到小程序中的 API canvas,H5 中也是有 canvas 的,不過之前也一直沒有機會用,這次正好乘機試試水。

晚上回家看了下官方文檔,網上搜了一些類似的功能實現,最后寫好了一個 demo,基本上是能初步繪制國旗頭像了。

當然以后如果想要繪制其他帶掛件的頭像,只需要更改掛件素材即可,提前預約幫你們定做今年的圣誕帽。

 

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>
復制代碼
復制代碼
// 部分功能 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、最后

demo 寫完了,以小程序的尿性,怎么會沒有坑呢?發現真相的我眼淚差點掉下來,而且這個坑不是一般的坑,弄了老半天都沒解決。

具體是啥坑小程序留言區揭曉,感興趣的歡迎來留言討論如何解決,到發文為止依舊是個巨坑。

公眾號「我是玖柒后」后臺回復「頭像」即可獲取 demo 源碼,填坑不忘挖坑人,我太南了。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 我是玖柒后 來自: cnblogs
不朽的浪漫援彩金
规律网 平码 独平一码 3d千喜试机号关注 足球比分直播网皇冠网 浙江11选5技巧 彩票20选8 2018最好玩的棋 河北排列7号码公告 怎么入手股票 pk10开奖视频 足球明星图片 白城麻将免费挂 台湾宾果28计划app 中原风彩22选五今晚 体彩竞彩足球比分 足球英文 天津麻将规则图解