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

This article mainly introduces how WeChat Mini Programs realizes the production of the Spring Festival avatar in the year of the Tiger. It is very detailed and has a certain reference value. Interested friends must finish reading it!

First, go to the final effect picture:

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.

The above is all the contents of the article "how to make the Spring Festival avatar in the year of the Tiger" by WeChat Mini Programs. Thank you for your reading. Hope to share the content to help you, more related knowledge, welcome to 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.