用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序實戰(三)-生成二維碼海報

Rolan 2020-6-3 00:52

一、需求說明 點擊生成海報 海報有二維碼 點擊保存 可將海報保存到手機相冊 二、需求實現 2.1 總體實現方式 這個需求的核心路徑就是: 獲取到圖片路徑 - 使用 canvas 畫圖 - 將 canvas 畫布轉換為 url - 將該圖片 ...

一、需求說明

  1. 點擊生成海報
  2. 海報有二維碼
  3. 點擊保存 可將海報保存到手機相冊

二、需求實現

2.1 總體實現方式

這個需求的核心路徑就是: 獲取到圖片路徑 -> 使用 canvas 畫圖 -> 將 canvas 畫布轉換為 url -> 將該圖片存儲到手機相冊

其中,各個步驟的實現方式如下:

  1. 獲取到圖片路徑: 若是本地圖片,可直接使用相對路徑,如 '/images/poster-bg.png' 若是網絡圖片,或接口返回的圖片,則需要先將圖片下載到本地,獲取到圖片的路徑,再使用。可使用 wx.getImageInfo實現

  2. 使用 canvas 畫圖: 在小程序中使用 canvas 與在正常 web 項目中不同。 正常項目中這樣使用:

<canvas id="canvas-container"></canvas>
復制代碼
let canvas = document.getElementById('canvas-container')
let ctx = canvas.getContext()
// 接下來使用 ctx 的 api 進行繪圖
復制代碼

而在小程序中,是無法直接使用 document.getElementById 這樣的 api 操控 dom。因此,需要使用小程序專門提供的 api,用法如下:

<canvas canvas-id="canvas-container"></canvas>
復制代碼
let ctx = wx.createCanvasContext('canvas-container')
// 接下來使用 ctx 的 api 進行繪圖
復制代碼
  1. 將 canvas 畫布轉換為 url 使用微信提供的 api,將完成的畫布轉換為 url:wx.canvasToTempFilePath

  2. 將該圖片存儲到手機相冊 使用微信提供的 api,將圖片保存在手機相冊:wx.saveImageToPhotosAlbum


2.1 獲取到圖片路徑

  1. 海報背景圖 背景圖片直接放進了代碼的靜態資源文件夾里。直接使用相對路徑即可

  2. 二維碼 二維碼需要調用后端接口獲得,并下載到本地獲取臨時路徑。 調接口獲取二維碼路徑并保存:

getPosterImage() {
	wx.showLoading({
    title: '正在制作海報。。。'
  })
	let that = this
	post(api.getQRImage).then(res => {
	  this.setData({
	    qrImageUrl: res.path
	  })
	  this.getImageInfo()
	})
}
復制代碼

由于網絡圖片或接口返回圖片,無法直接使用,需要下載到本地獲取臨時路徑:

getImageInfo() {
	let that = this
	wx.getImageInfo({
		src: this.data.qrImageUrl,
		success: res => {
			that.drawPoster(res.path)
		}
	})
}
復制代碼

2.2 使用 canvas 畫圖

  1. 增加 canvas 標簽,設置為不可見
<!-- 通過 isShowPoster 控制畫布是否顯示 -->
<!-- 設置畫布寬高 -->
<canvas canvas-id="poster-canvas" class="{{isShowPoster ? '' : 'no-display'}}" style="width:{{windowWidth}}px;height:{{posterHeight}}px;"></canvas>

<!-- 保存海報按鈕,通過 isShowPoster 控制是否顯示 -->
<button class="{{isShowPoster ? '' : 'no-display'}}" bindtap="handleSavePoster">保存海報</button>
復制代碼
  1. 通過屏幕尺寸計算畫布尺寸:
onLoad: function (options) {
	  // poster 的寬和高依據拿到的背景圖寬高為準
    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
    })
  }
復制代碼
  1. 獲取 canvas context 實例:
<canvas canvas-id="canvas-container"></canvas>
復制代碼
drawPoster() {
	let ctx = wx.createCanvasContext('canvas-container')
}
復制代碼
  1. 使用 ctx 實例的 api 繪圖:
drawPoster() {
	let windowWidth = this.data.windowWidth
  let posterHeight = this.data.posterHeight
	let ctx = wx.createCanvasContext('canvas-container')
	// 繪制背景圖
	ctx.drawImage(this.data.backgroundUrl, 0, 0, windowWidth, posterHeight, 0, 0);
	// 繪制二維碼 
	// x坐標為 (畫布寬度 - 二維碼寬度) / 2
	// y坐標為 (畫布高度 - 二維碼高度 - 底部距離) 
  ctx.drawImage(this.data.qrImageUrl, (windowWidth - 60) / 2, posterHeight - 70, 60, 60, 0, 0);
	// 繪圖
	ctx.draw()

	// 將畫布設置為可見
	this.setData({
  	isShowPoster: true
	})
	wx.hideLoading()
}
復制代碼

2.3 將 canvas 畫布轉換為 url

handleSavePoster() {
    wx.showLoading({
      title: '正在保存海報。。。'
    })
    let that = this
    setTimeout(function() {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.data.windowWidth,
        height: that.data.posterHeight,
        destWidth: that.data.windowWidth,
        destHeight: that.data.posterHeight,
        canvasId: 'poster-canvas',
        success: function (res) {
          that.setData({
            posterUrl: res.tempFilePath,
          })
          that.saveImageToAlbum()
        }
      })
    }, 500)
  }
復制代碼

2.4 將該圖片存儲到手機相冊

saveImageToAlbum() {
    let that = this;
    //將圖片保存到相冊       
    wx.saveImageToPhotosAlbum({
      filePath: that.data.posterUrl,
      success(res) {
        wx.hideLoading()
        wx.showModal({
          title: '保存成功',
          content: '圖片成功保存到相冊了,快去分享朋友圈吧',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#818FFB',
          success: function (res) {
			  // 保存成功,隱藏畫布
            if (res.confirm) {
              that.setData({
                isShowPoster: false
              })
            }
          }
        })
      }
    })
  }

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 張大鵝和鄭小狗 來自: 掘金
河北20选5大星走势图