Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge about how WeChat Mini Programs realizes the Christmas hat. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Let's see the effect first.

Train of thought

1. Get the user profile picture

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

There is a problem to note here, canvas does not support network images, the above is only the address of the profile picture, so here to download the picture to Wechat's temporary directory. The code is as follows:

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

It is more convenient to use Wechat's ready-made API to get the avatar.

two。 Draw the user's profile picture

The commonly used methods are encapsulated here, and the avatarImg.w and avatarImg.h below refer to the size of the avatar.

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

Drawing pictures using the drawImage function

3. Draw a hat

Before drawing the hat, I defined an object object to hold the parameters of the hat

Var hat = {url: ".. / res/hat01.png", w: 40, h: 40, x: 100,100, b: 1 magnification of rotate / scaling rotate: 0 / angle of rotation}

Next, start drawing the hat.

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)}

To explain a little bit here, it is to scale and rotate with the center point of the hat as the origin.

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

At this point, the origin has moved from (0) to (x), which is the center of the hat, where 1/2 of the length of the hat meets 1/2 of the width.

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

The key to drawing a hat is to move XMague y out of the origin, as shown in the following diagram:

4. Change the parameters of the hat

Move the hat:

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

Rotate the hat:

RotateHat: function (e) {hat.rotate = e.detail.value / / this block is lazy, use the slider component, slide the value that.drawA ()}

Zoom the 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, slide the value}

Change the hat style:

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

There is drawA () in all of these methods, which mainly redraws the canvas every time you move, rotate, scale, or change parameters.

5.Canvas Export Picture

Wechat officially provides corresponding API.

SaveToPhoto: function () {wx.canvasToTempFilePath ({x: 0, y: 0, width: 240,240,240,240,240,240,240, canvasId: 'ctx', success: function (res) {/ / canvas successful callback}})})}

Finally save to the album

Wx.saveImageToPhotosAlbum ({filePath: res.tempFilePath,}) wx.showToast ({title: 'saved successfully'}) the above is all the content of the article "how to realize WeChat Mini Programs's Christmas Hat". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.