Shulou(Shulou.com)06/02 Report--

In this article, the editor introduces in detail how to make Mini Program in the year of the Tiger by Android. The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve Android to make Mini Program in the year of the Tiger" can help you solve your doubts. Let's follow the editor's way of thinking to learn new knowledge.

1. Realization principle

As you can see from the effect picture, two pictures are used in this place:

One is the profile picture of Wechat users obtained through the "get profile picture" button, which is used as a base picture.

The other is a picture frame, which is a prefabricated static resource.

When you click "Save profile Picture", draw the above two pictures to the drawing board through canvas, draw the base picture first, draw the picture in the picture frame, and then save the picture on the drawing board locally.

Let's start with the specific implementation steps.

2. Collect static resources

In my Mini Program built-in some static resources, such as: profile picture frame picture, home background picture, bottom navigation bar icon and so on.

3. Coding

It is divided into three parts to introduce the coding stage.

3.1 get Wechat user avatars

WeChat Mini Programs provides api to get Wechat user information. Wx.getUserProfile (Object object)

Click the button button to obtain Wechat user information:

Get the avatar

The getUserProfile implementation is as follows:

/ / it is recommended to use wx.getUserProfile to obtain user information. Developers need to confirm getUserProfile (e) {let that = this every time they obtain users' personal information through this API. Wx.getUserProfile ({desc: 'for generating avatars only', / / declare the use after obtaining the user's personal information, which will be displayed in the pop-up window later. Please carefully enter success: (res) = > {/ / get high-definition user avatars let url = res.userInfo.avatarUrl While (! isNaN (parseInt (url.substring (url.length-1, url.length) {url = url.substring (0, url.length-1)} url = url.substring (0, url.length-1) + "/ 0"; res.userInfo.avatarUrl = url That.setData ({userInfo: res.userInfo, hasUserInfo: true})});}

It is finished to get Wechat user avatars here.

Note: the user profile image returned through res.userInfo is low resolution by default, and it needs to be processed to obtain the high-resolution image of the user profile image.

3.2 drawing an Ima

The drawing mainly uses WeChat Mini Programs to provide canvas-related API.

Variable description:

HotArr: [{name:' Tiger year Photo frame', key:'hunian'}, {name:' Tiger head Hat', key:'shendan'}, {name:' Flag', key:'guoqing'}]

CurHot: the index used to hold the currently selected hotArr.

WindowWidth: wx.getSystemInfoSync (). WindowWidth

Size: 260; / / Custom size

Pc: wx.createCanvasContext ('myCanvas')

DrawImg () {wx.showLoading ({title: 'generate avatar.',}) let that = this; let type = this.data.hotArr [this.data.curHot] .key; let promise1 = new Promise (function (resolve, curHot) {wx.getImageInfo ({src: that.data.userInfo.avatarUrl, success: function (res) {resolve (res)) }})}); var index = that.data.defaultImg; let promise2 = new Promise (function (resolve, reject) {wx.getImageInfo ({src: `.. /.. / images/$ {type} / hat$ {index} .png`, success: function (res) {resolve (res);}})}) Promise.all ([promise1, promise2]) .then (res = > {/ / is mainly to calculate the position pc.clearRect (0,0, windowWidth, size) of each picture and text. / / draw the background map pc.drawImage (res [0] .path, windowWidth/2-130,0, size, size) / / draw the picture frame pc.drawImage ('.. /.. /'+ res [1] .path, windowWidth/2-130,0, size, size) pc.stroke () pc.draw (false, () = > {/ / callback after drawing the picture successfully Call the save canvas method this.canvasToTempFile () })})}

Wx.getImageInfo () is mainly used to get the information of the picture and return the local path of the picture.

This place is mainly because drawImage () only supports drawing local images.

3.3 Save Ima

In the previous step, we have drawn two pictures onto the canvas, and then save the contents of the canvas locally.

Saving the contents of the canvas to the local album is also a two-step process.

Step 1: export the contents of the specified area of the current canvas to generate a picture of the specified size.

By using wx.canvasToTempFilePath ()

Step 2: local photo albums will be saved.

By using wx.saveImageToPhotosAlbum (https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html)

CanvasToTempFile () {wx.canvasToTempFilePath ({x: windowWidth/2-130, / / this place minus 130 because our image size is set to 260y: 0, height: size, width: size, canvasId: 'myCanvas', success: (res) = > {wx.saveImageToPhotosAlbum ({filePath: res.tempFilePath, success: result = > {wx.hideLoading ()) Wx.showModal ({content: 'the picture has been saved to the album, please go to Wechat to set it up!', showCancel: false, success: function (res) {if (res.confirm) {console.log ('user click OK') })}, fail (e) {wx.hideLoading (); console.log ("err:" + e);})});}

So far, the basic avatar frame function has been realized.

After reading this, the article "how to make Mini Program in the year of the Tiger with Android" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about the article, please follow 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.