Teach you to create ornaments picture | applet seventy change the canvas to draw the flag Avatar

Yesterday circle of friends is, " Please give me a flag @ the official micro-channel " scraper, although that is false, but from another point of view, to figure out how to achieve more interesting.

1、canvas

This had to mention applet API canvas , canvas H5 is also there, but no opportunity has been used before, this just took the opportunity to test the waters. 

Go home at night looked under the official documents, online search some similar functions to achieve, finally written a demo, basically able to draw a preliminary picture of the flag.

Of course, if you want to draw another picture later with a pendant, the pendant only need to change the material to make an appointment in advance to help you customize this year's Christmas hats.

 

2, the code

Implementation process is divided into the following steps:

1, the new canvas drawing board

2. Draw picture as background (demo is currently upload their own avatar making)

3. Draw a border flag

4, save to phone album (to be authorized)

Ado, directly on the code:

// 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"></>the Button</Save to album
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: 'successfully saved' 
          }) 
        }, 
        Fail (RES) { 
          wx.showToast ({ 
            title: 'save cancel ...', 
            icon: 'none ' 
          }) 
        } 
      }) 
    } 
  }) 
}

 

3, final

demo finished, urine small program, how could it not pit it? Discover the truth of my tears almost fall, but this is not an ordinary pit pit, I did not get waited a long time to resolve.

What is the specific message applet pit area were announced, interested welcome to discuss how to address a message to the posting date is still a giant pit.

No public, "I am the Jiu Qi" backstage reply "Avatar" to get  demo source code , did not forget to fill the hole digging, I too the south.

 

 

 

 

recommended article:

Jump applet Hong eighty-one pit of mass participation