微信小程序用canvas畫圖并分享
更新時間:2020年03月09日 17:02:23 作者:LLDD。
這篇文章主要為大家詳細介紹了微信小程序用canvas畫圖,并實現(xiàn)分享功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
最近開始做微信小程序,有這樣一個需求:
從列表頁進入詳情,在每一個詳情頁面去分享,分享出來的圖片是帶有當前詳情數(shù)據(jù)的圖片
如下圖的列表:
分享出來的樣子:
解決方案和思路:canvas畫圖生成圖片
上代碼:
【html部分】
<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas> <button open-type='share'>分享</button>
【js部分】
var ctx = "" // 用于獲取canvas var leftMargin = "" //文字距離左邊邊距 var topMargin = "" //文字距離右邊邊距 Page({ /** * 頁面的初始數(shù)據(jù) */ data: { title: '人人車司機', salary: '500-8000元/月', rtype: '日結(jié)', rmoney: '20元', canvasWidth: '', // canvas寬度 canvasHeight: '', // canvas高度 imagePath: '' // 分享的圖片路徑 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { var that = this var sysInfo = wx.getSystemInfo({ success: function (res) { that.setData({ //設(shè)置寬高為屏幕寬,高為屏幕高的80%,因為文檔比例為5:4 canvasWidth: res.windowWidth, canvasHeight: res.windowWidth * 0.8 }) leftMargin = res.windowWidth topMargin = res.windowWidth * 0.8 }, }) }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { ctx = wx.createCanvasContext('myCanvas') this.addImage() this.tempFilePath() }, //畫背景圖 addImage: function () { var context = wx.createContext(); var that = this; var path = "/images/share.jpg"; //將模板圖片繪制到canvas,在開發(fā)工具中drawImage()函數(shù)有問題,不顯示圖片 //不知道是什么原因,手機環(huán)境能正常顯示 ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight); this.addTitle() this.addRtype() this.addRmoney() this.addSalary() ctx.draw() }, //畫標題 addTitle: function (){ var str = this.data.title ctx.font = 'normal bold 20px sans-serif'; ctx.setTextAlign('center'); // 文字居中 ctx.setFillStyle("#222222"); ctx.fillText(str, this.data.canvasWidth/2,65) }, // 畫返費方式 addRtype: function () { var str = this.data.rtype ctx.setFontSize(16) ctx.setFillStyle("#ff4200"); ctx.setTextAlign('left'); ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4) }, // 畫返費金額 addRmoney: function () { var str = this.data.rmoney ctx.setFontSize(16) ctx.setFillStyle("#222"); ctx.setTextAlign('left'); ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5) }, // 畫薪資 addSalary: function () { var str = this.data.salary ctx.setFontSize(16) ctx.setFillStyle("#222"); ctx.setTextAlign('left'); ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61) }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function (res) { // return eventHandler接收到的分享參數(shù) return { title: this.data.title, path: '/pages/test/test', imageUrl: this.data.imagePath }; }, //導出圖片 tempFilePath: function(){ let that = this; wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function success(res) { wx.saveFile({ tempFilePath: res.tempFilePath, success: function success(res) { that.setData({ imagePath: res.savedFilePath }); } }); } }); }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { } })
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JS如何實現(xiàn)給字符加千分符(65,541,694,158)
JS如何實現(xiàn)給字符加千分符,本文給大家?guī)砹嘶趈s實現(xiàn)的代碼,代碼簡單易懂,感興趣的朋友一起學習吧2016-08-08event.x,event.clientX,event.offsetX區(qū)別
event.x,event.clientX,event.offsetX區(qū)別,需要的朋友可以參考下。2006-11-11