WeChat mini-app "Christmas hat" Implementation ideas, mini-app Christmas

The implementation idea of the mini-program "Christmas hat" is explained in detail, and the mini-program Christmas

In the past two days, the circle of friends has been refreshed by the "Christmas hat" screen. This mini-program has been rumored by the official authorities, and another phenomenon-level thing. From the product point of view is undoubtedly very successful, but from the technical point of view is indeed used to, creativity is very important! To put it simply, get the Avatar, draw the Avatar inside the Canvas, then draw a hat in the Canvas, adjust the parameters (Position, size, rotation) of the hat, and save it as an image.

Let's take a look at the effect.

 

Ideas

1. Get the user avatar

wx.getUserInfo({    success: function(res) {        var userInfo = res.userInfo        var avatarUrl = userInfo.avatarUrl  }})

There is a problem here. canvas does not support network images. The above only gets the address of the Avatar image, so we need to download the image to a temporary directory here. The Code is as follows:

Wx. downloadFile ({url: userInfo. avatarUrl, success: function (res) {if (res. statusCode = 200) {avatarUrl = res. tempFilePath // the address here is pointing to a local image }}})

This step is convenient to use a ready-made API.

2. Draw a user profile picture

Common methods are encapsulated here. avatarImg. w and avatarImg. h below indicate the size of the Avatar.

drawAvatar: function (img) {    ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}

Use the drawImage function to draw images.

3. Draw a hat

Before creating a hat, I defined an object to save the hat parameters.

Var hat = {url :".. /res/hat01.png ", w: 40, h: 40, x: 100, y: 100, B: 1, // zoom rate rotate: 0 // Rotation Angle}

Next, draw the hats.

drawHat: function (hat) {     ctx.translate(hat.x, hat.y)     ctx.scale(hat.b, hat.b)     ctx.rotate(hat.rotate * Math.PI / 180)     ctx.drawImage(hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h) }

Here, we need to explain a little bit about how to scale and rotate the base point of the hat.

Ctx. translate (hat. x, hat. y) // translate moves the center of the canvas to the specified Coordinate

At this time, the origin point has been moved from (1/2) to (x, y), that is, the center of the hat, the length of the hat 1/2 and the width of the interchange.

ctx.drawImage(hat.url, -hat.w / 2, -hat.h / 2, hat.w, hat.h)

The key to drawing a hat is to move x and y out of the origin, as shown below:

 

4. Change the hat parameters.

Mobile hats:

moveHat: function (e) {      hat.x = e.touches[0].x     hat.y = e.touches[0].y      that.drawA()  }

Rotating hats:

RotateHat: function (e) {hat. rotate = e. detail. value // This part is lazy. Use the slider component to slide the value that. drawA ()}

Zoom HAT:

ScaleHat: function (e) {hat. B = e. detail. value hat. w = 40 * hat. B hat. h = 40 * hat. B that. drawA () // use the slider component here. The sliding value is}

Change the hat style:

ChangeHat: function (e) {hat. url = e. currentTarget. dataset. url // change the hat style that. drawA ()}

There are drawA () in these methods, which is used to reproduce the la s for every movement, rotation, scaling, and parameter change.

5. Export images using Canvas

The official website provides corresponding APIs

SaveToPhoto: function () {wx. canvasToTempFilePath ({x: 0, y: 0, width: 240, height: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx ', success: function (res) {// callback for successful conversion of canvas images }})}

Last saved to album

Wx. saveImageToPhotosAlbum ({filePath: res. tempFilePath,}) wx. showToast ({title: 'saved successfully '})

Summary

The above is a small Editor to introduce you to the implementation of the small program "Christmas hat", I hope to help you, if you have any questions, please leave a message, the small editor will reply to you in a timely manner. Thank you very much for your support for the help House website!