In the past two days, the circle of friends has been flooded with Santa hats. Even WeChat officials came out to refute the rumors about this small program. It is another phenomenon-level thing. From a product perspective, it is undoubtedly very successful, but from a technical perspective, it is indeed commonplace, and creativity is very important! Let’s briefly talk about the idea: get the avatar, draw the avatar in Canvas, then draw a hat in Canvas, adjust the parameters of the hat (position, size, rotation), and finally save it as a picture.
Let’s take a look at the effect first
Ideas 1. Get user avatarwx.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. What is obtained above is only the avatar image address, so here you need to download the image to the temporary directory of WeChat. 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 image} } })
It is more convenient to use WeChat’s ready-made API for obtaining the avatar.
2. Draw user avatarCommonly used methods are encapsulated here. 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)}
Draw pictures using the drawImage function
3. Draw the hatBefore drawing the hat, I defined an object object to save the parameters of the hat
var hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1,//Scale magnification rotate: 0//Rotation angle}
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) }
Let me explain a little bit here. It is scaling and rotating 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 time, the origin has moved from (0, 0) to (x, y), which is the center point of the hat, the intersection of half the length and half the width of the hat.
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 outside the origin. The schematic diagram is as follows:
4. Change the parameters of the hatMoving Hat:
moveHat: function (e) { hat.x = e.touches[0].x hat.y = e.touches[0].y that.drawA() }
Spin hat:
rotateHat: function (e) { hat.rotate = e.detail.value //I am lazy here, 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() ////The slider component is used here to slide value}
Change hat style:
changeHat: function (e) { hat.url = e.currentTarget.dataset.url //Change the style of the hat that.drawA() }
These methods all have drawA(), which mainly redraws the canvas every time it moves, rotates, scales, or changes parameters.
5.Canvas export picturesWeChat official provides corresponding API
saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: 240, height: 240, destWidth: 240, destHeight: 240, canvasId: 'ctx', success: function (res) { // Canvas to image successful callback} })}
Finally save to album
wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({title: 'Save successfully'})Summarize
The above is the implementation idea of the WeChat applet Christmas hat introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!