小程序分享頁面圖片的實現(xiàn)方式

　　

　　開發(fā)微信小程序的時候，經(jīng)常要遇到如上圖這樣的，保存小程序二維碼圖片的分享功能。

　　首先，需要在 wxml 中 創(chuàng)建一個 畫板 canvas 。

　　wxml :

　　保存圖片 //保存圖片按鈕

　　//這里的 canvas-id 后面要用的上。

　　//style里的寬高要用上，不設(shè)置寬高畫板會失效。

　　//canvasHidden是控制畫板顯示隱藏的參數(shù)，畫板直接設(shè)置display none，會導致失效。

　　data :

　　data: {

　　canvasHidden:true, //設(shè)置畫板的顯示與隱藏，畫板不隱藏會影響頁面正常顯示

　　avatarUrl: '', //用戶頭像

　　nickName: '', //用戶昵稱

　　wxappName: app.globalData.wxappName, //小程序名稱

　　shareImgPath: '',

　　screenWidth: '', //設(shè)備屏幕寬度

　　description: app.globalData.description, //獎品描述

　　FilePath:'', //頭像路徑

　　},

　　js :

　　onLoad: function (options) {

　　var that = this

　　var userInfo, nickName, avatarUrl

　　//獲取用戶信息，頭像，昵稱之類的數(shù)據(jù)

　　wx.getUserInfo({

　　success: function (res) {

　　console.log(res);

　　userInfo = res.userInfo

　　nickName = userInfo.nickName

　　avatarUrl = userInfo.avatarUrl

　　that.setData({

　　avatarUrl: res.userInfo.avatarUrl,

　　nickName: res.userInfo.nickName,

　　})

　　wx.downloadFile({

　　url: res.userInfo.avatarUrl

　　})

　　}

　　})

　　//獲取用戶設(shè)備信息，屏幕寬度

　　wx.getSystemInfo({

　　success: res => {

　　that.setData({

　　screenWidth: res.screenWidth

　　})

　　console.log(that.data.screenWidth)

　　}

　　})

　　//定義的保存圖片方法

　　saveImageToPhotosAlbum:

　　function () {

　　wx.showLoading({

　　title: '保存中...',

　　})

　　var that = this;

　　//設(shè)置畫板顯示，才能開始繪圖

　　that.setData({

　　canvasHidden: false

　　})

　　var unit = that.data.screenWidth / 375

　　var path1 = "../images/bg3.png"

　　var avatarUrl = that.data.avatarUrl

　　console.log(avatarUrl + "頭像")

　　var path2 = "../images/award.png"

　　var path3 = "../images/qrcode.png"

　　var path4 = "../images/headborder.png"

　　var path5 = "../images/border.png"

　　var unlight = "../images/unlight.png"

　　var nickName = that.data.nickName

　　console.log(nickName + "昵稱")

　　var context = wx.createCanvasContext('share')

　　var description = that.data.description

　　var wxappName = "來「 " + that.data.wxappName + " 」試試運氣"

　　context.drawImage(path1, 0, 0, unit * 375, unit * 462.5)

　　// context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50)

　　context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 178)

　　context.drawImage(path5, unit * 48, unit * 120, unit * 280, unit * 178)

　　context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32)

　　context.drawImage(unlight, unit * 178 , unit * 145, unit * 22, unit * 32)

　　context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32)

　　context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32)

　　context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32)

　　context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32)

　　context.drawImage(path3, unit * 20, unit * 385, unit * 55, unit * 55)

　　// context.drawImage(path4, 48, 200, 280, 128)

　　context.setFontSize(14)

　　context.setFillStyle("#999")

　　context.fillText("長按識別小程序", unit * 90, unit * 408)

　　context.fillText(wxappName, unit * 90, unit * 428)

　　//把畫板內(nèi)容繪制成圖片，并回調(diào) 畫板圖片路徑

　　context.draw(false, function () {

　　wx.canvasToTempFilePath({

　　x: 0,

　　y: 0,

　　width: unit * 375,

　　height: unit * 462.5,

　　destWidth: unit * 375,

　　destHeight: unit * 462.5,

　　canvasId: 'share',

　　success: function (res) {

　　that.setData({

　　shareImgPath: res.tempFilePath

　　})

　　if (!res.tempFilePath) {

　　wx.showModal({

　　title: '提示',

　　content: '圖片繪制中，請稍后重試',

　　showCancel: false

　　})

　　}

　　console.log(that.data.shareImgPath)

　　//畫板路徑保存成功后，調(diào)用方法吧圖片保存到用戶相冊

　　wx.saveImageToPhotosAlbum({

　　filePath: res.tempFilePath,

　　//保存成功失敗之后，都要隱藏畫板，否則影響界面顯示。

　　success: (res) => {

　　console.log(res)

　　wx.hideLoading()

　　that.setData({

　　canvasHidden: true

　　})

　　},

　　fail: (err) => {

　　console.log(err)

　　wx.hideLoading()

　　that.setData({

　　canvasHidden: true

　　})

　　}

　　})

　　}

　　})

　　});

　　},

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。