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

This article mainly introduces "how to realize the Mini Program poster saving and sharing picture function". In the daily operation, I believe that many people have doubts about how to realize the Mini Program poster saving and sharing picture function. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubts about "how to realize the Mini Program poster saving and sharing picture function". Next, please follow the editor to study!

The business generates posters (including user avatars and custom text) in Mini Program and saves them to local implementation ideas.

Use the canvas canvas to locate the user's profile picture and custom text, and the user clicks the button to save it locally.

Note difficult points Mini Program canvas does not support custom width and height, anyway, I can't find it. Most businesses of canvas canvas need full-screen, responsive, at least 100% wide solution: judge the screen size, transfer to wxml remote images can not be obtained directly using getImageInfo, need to save to the local solution: canvas directly supports remote images, do not need to use this api technology stack

Canvas

Wx.createCanvasContext

Wx.canvasToTempFilePath

Promise

First of all, let's write a canvas placeholder in wxml. Note that the width here is 100%, responsive. The high posterHeight of the poster is dynamically calculated from js, and the size of the poster is dynamically calculated according to the screen data: {motto: 'Hello World', hidden: true, userInfo: {}, hasUserInfo: false, windowWidth:', posterHeight:',}, onLoad: function () {const poster = {"with": 375 "height": 587} const systemInfo = wx.getSystemInfoSync () let windowWidth = systemInfo.windowWidth let windowHeight = systemInfo.windowHeight let posterHeight = parseInt ((windowWidth / poster.with) * poster.height) this.setData ({windowWidth: windowWidth, posterHeight: posterHeight})} background image generation const that = this / / picture path const imagePath ='.. /.. / static/image/common/' let bgimgPromise = new Promise (function (resolve, reject) {console.log ('data') That.data) wx.getImageInfo ({src: imagePath + "base.png", success: function (res) {resolve (res) When the avatar is initialized directly with the remote avatar, the local storage or usage status can be stored here before the poster is generated.

Wxml

/ / you can start to answer questions from the backend interface or the official remote address (get user information)

Js

GetUserInfo: function (e) {app.globalData.userInfo = e.detail.userInfo let userInfo = e.detail.userInfo console.log ('userInfo', userInfo) / / update user information / / api.post (' update user information url', userInfo) this.setData ({userInfo: e.detail.userInfo, hasUserInfo: true})} to generate poster background and picture

Wxml

BgimgPromise.then (res = > {console.log ('Promise.all', res) const ctx = wx.createCanvasContext (' shareImg') ctx.width = windowWidth ctx.height = posterHeight console.log (windowWidth, posterHeight) / / background ctx.drawImage ('.. /'+ res [0] .path, 0,0, windowWidth, posterHeight, 0,0) / / profile ctx.drawImage (that.data.userInfo.avatarUrl, 48,182) 58, 58, 0, 0) ctx.setTextAlign ('center') ctx.setFillStyle (' # 000') ctx.setFontSize (22) / / ctx.fillText ('shared text 2:stark.wang', 88414) ctx.fillText ('shared text 1 my blog: https://shudong.wang', 55 414) ctx.stroke () ctx.draw ()) save to local onLoad: function () {share: function () {var that = this wx.showLoading ({title: 'poster is being made. }) new Promise (function (resolve, reject) {wx.canvasToTempFilePath ({x: 0, y: 0, width: 444, height: 500,555, destHeight: 666, canvasId: 'starkImg', success: function (res) {console.log (res.tempFilePath)) That.setData ({prurl: res.tempFilePath, hidden: false}) wx.hideLoading () resolve (res)} Fail: function (res) {console.log (res)}). Then (res = > {console.log (res) this.save ()})} Update avatar cropped to a circular ctx.save () / / a pair of current area save ctx.beginPath () / / start a new region ctx.arc (73,224,38,0,2 * Math.PI) Ctx.clip () / / cut the circle ctx.drawImage (res [1], 36,186,94,94,0) from the canvas 0) / / fill the picture into the cropped circle ctx.restore () / restore the remote connection is prone to request failure and save the avatar to local storage in advance to solve getImg: function () {let avatarUrl = this.data.userInfo.avatarUrl downLoadFile (avatarUrl). Then ((res) = > {console.log (res) wx.saveFile ({tempFilePath: res.data.tempFilePath) Success: function (res) {wx.setStorageSync ('avatarUrl', res.savedFilePath)}})})}

Get the avatar

/ / avatar let promiseAvatarUrl = new Promise (function (resolve, reject) {resolve (wx.getStorageSync ('avatarUrl'))}) .catch (res= > {console.log (' catch',res)})

The background remains the same.

Const that = thislet promiseBdImg = new Promise (function (resolve, reject) {console.log ('data', that.data) wx.getImageInfo ({src: imagePath + "base1.png", success: function (res) {console.log (' promiseBdImg', res) resolve (res);}})

Canvas updates are generated at this time

Promise.all ([promiseBdImg, promiseAvatarUrl]) .then (res = > {console.log ('Promise.all', res) const ctx = wx.createCanvasContext (' shareImg') ctx.width = windowWidth ctx.height = posterHeight console.log (windowWidth, posterHeight) / / is mainly to calculate the position of each image and text ctx.drawImage ('.. /'+ res [0] .path, 0, windowWidth, posterHeight, 0 0) ctx.save () / / A pair of current regions to save ctx.beginPath () / / start a new region ctx.arc (73,224,38,0,2 * Math.PI) Ctx.clip (); / / cut the circle ctx.drawImage from the canvas (res [1], 36,186,94,94,0,0) / fill the image into the cut circle ctx.restore () / / restore ctx.setTextAlign ('center') ctx.setFillStyle (' # 000') ctx.setFontSize (22) ctx.save () ctx.beginPath () Ctx.fillText ('author: stark.wang', 545 / 2130) ctx.fillText (' my blog: http://shudong.wang', 190,414) ctx.stroke () ctx.draw ()), the study on "how to generate posters, save and share pictures on Mini Program" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.