微信小程式用canvas畫圖並分享

阿新 • • 發佈：2020-03-10

最近開始做微信小程式，有這樣一個需求：

從列表頁進入詳情，在每一個詳情頁面去分享，分享出來的圖片是帶有當前詳情資料的圖片

如下圖的列表：

微信小程式用canvas畫圖並分享

分享出來的樣子：

微信小程式用canvas畫圖並分享

解決方案和思路：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({

 /**
 * 頁面的初始資料
 */
 data: {
 title: '人人車司機',salary: '500-8000元/月',rtype: '日結',rmoney: '20元',canvasWidth: '',// canvas寬度
 canvasHeight: '',// canvas高度
 imagePath: '' // 分享的圖片路徑
 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function (options) {
 var that = this
 var sysInfo = wx.getSystemInfo({
  success: function (res) {
  that.setData({
   //設定寬高為螢幕寬，高為螢幕高的80%，因為文件比例為5:4
   canvasWidth: res.windowWidth,canvasHeight: res.windowWidth * 0.8
  })
  leftMargin = res.windowWidth
  topMargin = res.windowWidth * 0.8
  },})
 },/**
 * 生命週期函式--監聽頁面初次渲染完成
 */
 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,在開發工具中drawImage()函式有問題，不顯示圖片
 //不知道是什麼原因，手機環境能正常顯示
 ctx.drawImage(path,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,topMargin * 0.5)
 },// 畫薪資
 addSalary: function () {
 var str = this.data.salary
 ctx.setFontSize(16)
 ctx.setFillStyle("#222");
 ctx.setTextAlign('left');
 ctx.fillText(str,topMargin * 0.61)
 },/**
 * 使用者點選右上角分享
 */
 onShareAppMessage: function (res) {
 // return eventHandler接收到的分享引數
 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
   });
   }
  });
  }
 });
 },/**
 * 生命週期函式--監聽頁面顯示
 */
 onShow: function () {

 },/**
 * 生命週期函式--監聽頁面隱藏
 */
 onHide: function () {

 },/**
 * 生命週期函式--監聽頁面解除安裝
 */
 onUnload: function () {

 },/**
 * 頁面相關事件處理函式--監聽使用者下拉動作
 */
 onPullDownRefresh: function () {

 },/**
 * 頁面上拉觸底事件的處理函式
 */
 onReachBottom: function () {

 }


})

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。