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

How to develop a Spring Festival avatar to generate Mini Program in the year of the Tiger? for this problem, this article introduces in detail the corresponding analysis and answers, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

The Spring Festival is coming soon. Today, I saw that some netizens shared the web version of the tool for making the profile picture of the year of the Tiger. I feel very good. I happen to be planning to do a Mini Program training without any theme, so let's try this.

Talk about the implementation process.

The first step: first get the current Wechat avatar picture, the main code is as follows, note that the avatar picture obtained by default is not high-definition, need to be converted to high-definition picture first, to avoid blurring after generation.

GetUserProfile (e) {console.log (e) let that = this; wx.getUserProfile ({desc: 'for generating avatars only', success: (res) = > {var 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; console.log (JSON.stringify (res.userInfo)) That.setData ({userInfo: res.userInfo, hasUserInfo: true}) that.drawImg ();}})

The second step: synthesize the avatar, get the local file from the material picture and the avatar picture obtained in the first step, and then synthesize it using the cavas component of Mini Program.

DrawImg () {let that = this; wx.showLoading ({title: 'generating avatar.',}) let promise1 = new Promise (function (resolve, reject) {wx.getImageInfo ({src: that.data.userInfo.avatarUrl, success: function (res) {resolve (res);})}); var mask_id = that.data.now_mask Let promise2 = new Promise (function (resolve, reject) {wx.getImageInfo ({src: `. / assets/img/mask0 ${mask_id} .png`, success: function (res) {console.log (res) resolve (res);}})) Promise.all ([promise1, promise2]) .then (res = > {console.log (res) var windowWidth = wx.getSystemInfoSync (). WindowWidth var context = wx.createCanvasContext ('myAvatar'); var size = windowWidth / 750 * 500 / / var size = 500 context.drawImage (res [0] .path, 0,0, size, size); context.draw (true) context.save () Context.drawImage ('.. /.. /'+ res [1] .path, 0,0, size, size); context.draw (true) context.save ();}) wx.hideLoading ()}

Step 3: download the composite picture to your local album.

CanvasToTempFile () {if (! this.data.userInfo) {wx.showModal ({title: 'warm reminder', content: 'Please click above to get Wechat avatar', showCancel: false,}) return} var windowWidth = wx.getSystemInfoSync (). WindowWidth var size = 500 / / var dpr = 750 / windowWidth wx.canvasToTempFilePath ({x: 0, y: 0 Height: size, width: size, canvasId: 'myAvatar', 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);})});}

In this way, the main functions are achieved.

This is the answer to the question on how to develop a Mini Program for the Spring Festival profile picture of the year of the Tiger. I hope the above content can be of some help to you, if you still have a lot of doubts to be solved. You can follow the industry information channel for more related knowledge.

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.