小程序生成海報保存分享圖片功能怎么實現

這篇文章主要介紹“小程序生成海報保存分享圖片功能怎么實現”，在日常操作中，相信很多人在小程序生成海報保存分享圖片功能怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序生成海報保存分享圖片功能怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

業務

在小程序中生成海報（包括用戶頭像和自定義文字）并且保存到本地

實現思路

利用canvas畫布，把用戶頭像和自定義文字定位好，用戶點擊按鈕保存到本地

注意事項 難點

小程序canvas不支持自定義寬高，反正我沒找到，canvas畫布大部分業務都需要全屏，響應式，至少寬100%

解決方案：判斷到屏幕尺寸，傳到wxml 里面

遠程圖片不能直接使用 getImageInfo 獲取，需要保存到本地

解決方案：canvas直接支持遠程圖片，不需要使用這個api

技術棧

• canvas

• wx.createCanvasContext

• wx.canvasToTempFilePath

• Promise

實戰

首先我們在wxml里面寫一個canvas占位

注意這里的寬度是100%，響應式，海報的高posterHeight 是從js里面動態計算的

<canvas canvas-id="starkImg" style="width:100%;height:{{posterHeight}}px;"></canvas>

根據屏幕動態計算海報的尺寸

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
  })
}

背景圖片生成

  const that = this
  // 圖片路徑
  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);
      }
    })
  });

頭像直接使用遠程頭像

初始化的時候，調取，一定在生成海報之前
此處可以存儲本地，或使用狀態都可以

wxml

// 可以從后端接口獲取 或 官方本身遠程地址

 
  <button class="share" type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">開始答題（獲取用戶信息）</button>

js

  getUserInfo: function (e) {
    app.globalData.userInfo = e.detail.userInfo
    let userInfo = e.detail.userInfo
    console.log('userInfo', userInfo)
    // 更新用戶信息
    // api.post('更新用戶信息的url', userInfo)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

生成海報背景和圖片

wxml

bgimgPromise.then(res => {
      console.log('Promise.all', res)
      const ctx = wx.createCanvasContext('shareImg')
      ctx.width = windowWidth
      ctx.height = posterHeight
      console.log(windowWidth, posterHeight)
      // 背景圖
      ctx.drawImage('../../' + res[0].path, 0, 0, windowWidth, posterHeight, 0, 0)
      // 頭像
      ctx.drawImage(that.data.userInfo.avatarUrl, 48, 182, 58, 58, 0, 0)
      ctx.setTextAlign('center')
      ctx.setFillStyle('#000')
      ctx.setFontSize(22)
      // ctx.fillText('分享文字2：stark.wang出品', 88, 414)
      ctx.fillText('分享文字1我的博客：https://shudong.wang', 55, 414)
      ctx.stroke()
      ctx.draw()
    })

保存到本地

onLoad: function () {
  share: function () {
    var that = this
    wx.showLoading({
      title: '正在制作海報。。。'
    })
    new Promise(function (resolve, reject) {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 444,
        height: 500,
        destWidth: 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()
    })
  }
}

更新頭像裁剪為圓形

ctx.save() // 對當前區域保存
ctx.beginPath() // 開始新的區域
ctx.arc(73, 224, 38, 0, 2 * Math.PI);
ctx.clip();  // 從畫布上裁剪出這個圓形
ctx.drawImage(res[1], 36, 186, 94, 94, 0, 0) // 把圖片填充進裁剪的圓形
ctx.restore() // 恢復

上面是遠程連接容易發生請求失敗

把頭像提前存到本地存儲中解決

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)
      }
    })
  })
},

獲取頭像

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

背景還是不變

const that = this
let 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更新

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)
    //主要就是計算好各個圖文的位置
    ctx.drawImage('../../' + res[0].path, 0, 0, windowWidth, posterHeight, 0, 0)
    ctx.save() // 對當前區域保存
    ctx.beginPath() // 開始新的區域
    ctx.arc(73, 224, 38, 0, 2 * Math.PI);
    ctx.clip();  // 從畫布上裁剪出這個圓形
    ctx.drawImage(res[1], 36, 186, 94, 94, 0, 0) // 把圖片填充進裁剪的圓形
    ctx.restore() // 恢復
    ctx.setTextAlign('center')
    ctx.setFillStyle('#000')
    ctx.setFontSize(22)
    ctx.save()
    ctx.beginPath();
    ctx.fillText('作者：stark.wang', 545 / 2, 130)
    ctx.fillText('我的博客：http://shudong.wang', 190, 414)
    ctx.stroke()
    ctx.draw()
  })

到此，關于“小程序生成海報保存分享圖片功能怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！