Dieser Artikel führt Sie dazu, dem Trend zu folgen und ein kleines Programm zum Erstellen von Avataren für das Frühlingsfest im Jahr des Tigers zu erstellen. Holen Sie sich einen WeChat-Avatar, wählen Sie den Avatar-Rahmen aus und synthetisieren Sie dann verschiedene Avatare für das Frühlingsfest im Jahr des Tigers . Ich hoffe, es wird für alle hilfreich sein!
Das Frühlingsfest steht vor der Tür. Heute habe ich gesehen, wie einige Internetnutzer die Webversion des Avatar-Erstellungstools für das Jahr des Tigers geteilt haben. Ich hatte gerade vor, ein kleines Programm zum Üben ohne Thema zu erstellen. Probieren Sie es also mal mit diesem hier aus.
Zuerst die endgültigen Renderings:
Lassen Sie uns über den Implementierungsprozess sprechen
Schritt 1: Holen Sie sich das aktuelle WeChat-Avatarbild. Beachten Sie, dass das standardmäßig erhaltene Avatarbild nicht hoch ist -Definition. Sie müssen zuerst in hochauflösende Bilder konvertieren, um verschwommene Bilder nach der Generierung zu vermeiden.getUserProfile(e) { console.log(e) let that = this; wx.getUserProfile({ desc: '仅用于生成头像使用', 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(); } }); },
drawImg() { let that = this; wx.showLoading({ title: '生成头像中...', }) 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() },
canvasToTempFile(){ if(!this.data.userInfo){ wx.showModal({ title: '温馨提示', content: '请先点击上方获取微信头像', 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: '图片已保存到相册,请前往微信去设置哟!', showCancel: false, success: function(res) { if (res.confirm) { console.log('用户点击确定'); } } }) }, fail(e) { wx.hideLoading(); console.log("err:" + e); } }) } }); },
Endlich ist das aktuelle Projekt Open Source: https://github.com/hackun666/new-year- GesichtIch wünsche allen ein frohes Frühlingsfest und viel Glück im Jahr des Tigers!
Ursprüngliche Adresse: https://juejin.cn/post/7057807283463389191Autor: Hackun[Verwandte Lernempfehlungen:
Mini-Tutorial zur Programmentwicklung]
Das obige ist der detaillierte Inhalt vonEntwickeln Sie ein kleines Programm zur Generierung von Avataren für das Frühlingsfest im Jahr des Tigers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!