微信小程序用canvas畫(huà)圖并分享
最近開(kāi)始做微信小程序,有這樣一個(gè)需求:
從列表頁(yè)進(jìn)入詳情,在每一個(gè)詳情頁(yè)面去分享,分享出來(lái)的圖片是帶有當(dāng)前詳情數(shù)據(jù)的圖片
如下圖的列表:
分享出來(lái)的樣子:
解決方案和思路:canvas畫(huà)圖生成圖片
上代碼:
【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({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { title: '人人車(chē)司機(jī)', salary: '500-8000元/月', rtype: '日結(jié)', rmoney: '20元', canvasWidth: '', // canvas寬度 canvasHeight: '', // canvas高度 imagePath: '' // 分享的圖片路徑 }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { var that = this var sysInfo = wx.getSystemInfo({ success: function (res) { that.setData({ //設(shè)置寬高為屏幕寬,高為屏幕高的80%,因?yàn)槲臋n比例為5:4 canvasWidth: res.windowWidth, canvasHeight: res.windowWidth * 0.8 }) leftMargin = res.windowWidth topMargin = res.windowWidth * 0.8 }, }) }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { ctx = wx.createCanvasContext('myCanvas') this.addImage() this.tempFilePath() }, //畫(huà)背景圖 addImage: function () { var context = wx.createContext(); var that = this; var path = "/images/share.jpg"; //將模板圖片繪制到canvas,在開(kāi)發(fā)工具中drawImage()函數(shù)有問(wèn)題,不顯示圖片 //不知道是什么原因,手機(jī)環(huán)境能正常顯示 ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight); this.addTitle() this.addRtype() this.addRmoney() this.addSalary() ctx.draw() }, //畫(huà)標(biāo)題 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) }, // 畫(huà)返費(fèi)方式 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) }, // 畫(huà)返費(fèi)金額 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) }, // 畫(huà)薪資 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) }, /** * 用戶(hù)點(diǎn)擊右上角分享 */ onShareAppMessage: function (res) { // return eventHandler接收到的分享參數(shù) return { title: this.data.title, path: '/pages/test/test', imageUrl: this.data.imagePath }; }, //導(dǎo)出圖片 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)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { } })
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)
IE下Ajax緩存問(wèn)題的快速解決方法(get方式)。網(wǎng)上搜了很多解決方案,一大把,下面是我認(rèn)為比較全面的解決方案。主要分為客戶(hù)端解決和服務(wù)端解決2014-01-01基于JS如何實(shí)現(xiàn)給字符加千分符(65,541,694,158)
JS如何實(shí)現(xiàn)給字符加千分符,本文給大家?guī)?lái)了基于js實(shí)現(xiàn)的代碼,代碼簡(jiǎn)單易懂,感興趣的朋友一起學(xué)習(xí)吧2016-08-08使用命令對(duì)象代替switch語(yǔ)句的寫(xiě)法示例
這篇文章主要介紹了使用命令對(duì)象代替switch語(yǔ)句的寫(xiě)法示例,JS規(guī)范里面是禁止使用switch語(yǔ)句的,使用命令對(duì)象可以完美的解決這個(gè)問(wèn)題,需要的朋友可以參考下2015-02-02event.x,event.clientX,event.offsetX區(qū)別
event.x,event.clientX,event.offsetX區(qū)別,需要的朋友可以參考下。2006-11-11