小程式開發-利用canvas實現儲存二維碼海報到本機

LucaLJX發表於2018-09-05

Canvas

場景及需求

在小程式開發過程中，經常需要實現儲存某個頁面為帶小程式碼的二維碼海報圖片到本地，然後用於分享或者發朋友圈等操作。

主要技術點及小程式相關api

技術注意事項

小程式的canvas與H5 canvas使用api大部分一致，但由於小程式中沒有DOM節點的概念，所以不能使用很多現成的工具庫
小程式canvas預設寬度300px、高度225px
小程式canvas相關的api中單位為px，並非rpx，所以在業務實現過程中需要處理適配
小程式canvas對跨域圖片不支援，需要先將圖片快取到本地

技術點

wx.getImageInfo()
wx.getSystemInfo()
wx.canvasToTempFilePath()
wx.saveImageToPhotosAlbum()
canvas渲染相關api

整體流程

1.先獲取所有圖片資源，線上圖片需要快取到本地，使用圖片的本地路徑做渲染

2.獲取裝置資訊，根據裝置寬度計算出寬度因子x

3.繪製canvas

4.將canvas轉化為圖片，將圖片儲存到本機

實現

寬度因子x及元素寬度的尺寸計算

rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

參考文件：小程式-WXSS-尺寸單位

由文件可以看出不同的裝置，寬度是不同數值的px，但是均為750rpx，由此可以利用750rpx計算出寬度因子x:

裝置寬度 / 750

以設計稿寬度750rpx為例，則在不同裝置下，設計稿寬度y在不同裝置下的px寬度均為：

Y = y * x

Y = y * (裝置寬度 / 750)

由此，在實現中，canvas標籤寬高需要設定為變數,且使用微信提供的 wx.getSystemInfo（） 介面獲取裝置寬度資訊後，進行計算

<canvas canvas-id="qrcode-canvas" :style="{width: canvas.width + 'px', height: canvas.height + 'px'}"></canvas>
複製程式碼

// wx.js
// 獲取裝置基本資訊
export function wxGetSystemInfo () {
  return new Promise(async function (resolve, reject) {
    wx.getSystemInfo({
      success: function (res) {
        resolve(res);
      },
      fail: function (err) {
        reject(err);
      }
    })
  });
}
// demo.vue
// 獲取手機基本資訊
async getPhoneSystemInfo () {
  let _this = this;
  let systemInfoRes = await wxGetSystemInfo();
  _this.canvas.width = systemInfoRes.screenWidth;
  // 設計稿寬高為 750 * 912
  _this.canvas.height = 912 / 750 * _this.canvas.width;
  _this.storageQrcode();
},
複製程式碼

獲取遠端圖片快取到本地使用

api
- wx.getImageInfo()
- 參考文件： wx.getImageInfo()

注意：如果是本地圖片,即'static'資料夾中的圖片，如'/static/logo.png'經過wx.getImageInfo返回的path會省去開頭的'/'，即'static/logo.png'，這會導致拿不到資源，所以本地圖片不需要呼叫wx.getImageInfo()進行本地快取

// wx.js
// 獲取圖片基本資訊
export function wxGetImgInfo (imgUrl) {
  return new Promise(async function (resolve, reject) {
    wx.getImageInfo({
      src: imgUrl,
      success: function (res) {
        resolve(res);
      },
      fail: function (err) {
        reject(err);
      }
    })
  });
}
// demo.vue
// 快取遠端圖片
async storageQrcode () {
  let _this = this;
  // 背景圖url轉path
  // let bgRes = await wxGetImgInfo(_this.bgImg);
  // _this.imgPath.bgImg = bgRes.path;
  // Logo url轉path
  // let logoRes = await wxGetImgInfo(_this.logo);
  // _this.imgPath.logo = logoRes.path;
  
  // 頭像 url轉path
  // let headerImgRes = await wxGetImgInfo(_this.cardDetail.header);
  // _this.imgPath.headerImg = headerImgRes.path;
  // 二維碼 url轉path
  let qrCodeRes = await wxGetImgInfo(_this.qrCode);
  _this.imgPath.qrCode = qrCodeRes.path;
  console.log(_this.imgPath);
  // _this.initCanvas(_this.canvas.width);
},
複製程式碼

繪製canvas

canvas繪製主要用到了圖片繪製、文字繪製，圖片繪製及文字繪製的時候，需要引入上文說到的寬度因子x進行計算

圖片繪製

canvasContext.drawImage
- 參考文件： canvasContext.drawImage

這裡的圖片繪製之前先計算寬度因子

  let _this = this;
  // variableVal即為上文拿到的裝置寬度
  const variableNum = variableVal / 750; // 根據裝置寬度算出一個rpx為多少px
  const ctx = wx.createCanvasContext('qrcode-canvas');
  // 清除畫布上矩形的內容
  ctx.clearRect(0, 0, 0, 0);
  // 繪製上部card背景圖
  const bgImgDesc = {
    url: _this.imgPath.bgImg,
    left: 0,
    top: 0,
    width: 750 * variableNum,
    height: 912 * variableNum
  };
  ctx.drawImage(bgImgDesc.url, bgImgDesc.left, bgImgDesc.top, bgImgDesc.width, bgImgDesc.height);
  ctx.draw();
複製程式碼

文字的繪製

canvasContext.setFillStyle - 設定顏色
canvasContext.setFontSize - 設定大小
canvasContext.fillText - 填充文字

const nameDesc = {
  text: _this.cardDetail.name,
  fontSize: 36 * variableNum,
  color: '#4F5E6F',
  left: 102 * variableNum,
  top: 200 * variableNum
};
ctx.setFillStyle(nameDesc.color);
ctx.setFontSize(nameDesc.fontSize);
ctx.fillText(nameDesc.text, nameDesc.left, nameDesc.top);
ctx.draw();
複製程式碼

canvas轉圖片並儲存到本地

wx.canvasToTempFilePath - canvas轉圖片
- 參考文件： wx.canvasToTempFilePath
wx.saveImageToPhotosAlbum - 儲存圖片到本地
- 參考文件： wx.saveImageToPhotosAlbum

注意點

tip： wx.canvasToTempFilePath() 在 draw 回撥裡呼叫該方法才能保證圖片匯出成功。

由於匯出圖片需要在canvas繪製圖片的draw()方法回撥中使用才能,所以我們在繪製canvas的時候直接轉canvas為圖片，然後將路徑存下來，點選下載的時候，再直接拿圖片路徑進行下載操作。

// wx.js
// canvas畫布轉圖片
export function wxCanvasToTempFilePath (canvasObj) {
  return new Promise(async function (resolve, reject) {
    wx.canvasToTempFilePath({
      x: canvasObj.x,
      y: canvasObj.y,
      width: canvasObj.width,
      height: canvasObj.height,
      destWidth: canvasObj.destWidth,
      destHeight: canvasObj.destHeight,
      canvasId: canvasObj.canvasId,
      fileType: canvasObj.fileType ? canvasObj.fileType : 'png',
      success: function (res) {
        resolve(res);
      },
      fail: function (err) {
        reject(err);
      }
    })
  });
}
// demo.vue
// 繪製canvas
initCanvas () {
  let _this = this;
  // 繪製canvas
  ......
  ctx.draw(false, function () {
    _this.saveImg();
  });
},
// 將canvas轉為圖片
async saveImg () {
  let _this = this;
  const canvasObj = {
    x: 0,
    y: 0,
    width: _this.canvas.width,
    height: _this.canvas.height,
    destWidth: _this.canvas.width * 4,
    destHeight: _this.canvas.height * 4,
    canvasId: 'qrcode-canvas',
    fileType: 'png'
  };
  let imgRes = await wxCanvasToTempFilePath(canvasObj);
  _this.qrCodeImgPath = imgRes.tempFilePath;
},
複製程式碼

下載圖片到本地

<canvas canvas-id="qrcode-canvas" :style="{width: canvas.width + 'px', height: canvas.height + 'px'}"></canvas>
<button type="primary" plain="true" @click="downLoadImg"> 儲存二維碼 </button>
複製程式碼

// wx.js
// 儲存圖片到本地
export function wxSaveImageToPhotosAlbum (filePath) {
  return new Promise(async function (resolve, reject) {
    wx.saveImageToPhotosAlbum({
      filePath: filePath,
      success: function (res) {
        
        resolve(res);
      },
      fail: function (err) {
        reject(err);
      }
    })
  });
}
// demo.vue
// 儲存圖片到本機
async downLoadImg () {
  let _this = this;
  let saveRes = await wxSaveImageToPhotosAlbum(_this.qrCodeImgPath);
  if (saveRes.errMsg === 'saveImageToPhotosAlbum:ok') {
    wx.showToast({
      duration: 3000,
      icon: 'none',
      title: '儲存圖片成功！',
      mask: true
    });
  } else {
    wx.showToast({
      duration: 3000,
      icon: 'none',
      title: '儲存圖片失敗，請重試！',
      mask: true
    });
  }
},
複製程式碼

demo程式碼已經放在 './demo' 資料夾，歡迎交流

總結

在業務實現中，我們只要把業務流程進行分割，然後一步一步去實現，捋明白流程之後各個擊破很多第一反應去查詢已有的庫來實現的功能自己實現起來也很簡單。

在某種意義上，自己弄明白原理之後去實現反而更加輕鬆，更加得心應手。

-- LucaLJX: github:https://github.com/LucaLJX

微信小程式推廣二維碼海報Node.js實現版
2018-12-04
微信小程式Node.js
生成商品海報，附帶小程式二維碼
2021-05-12
小程式-生成海報儲存本地相簿
2019-05-10
小程式生成二維碼圖片儲存相簿並分享到朋友圈
2018-12-25
利用canvas生成海報
2019-02-26
Canvas
獲取微信小程式二維碼並且儲存
2022-02-10
微信小程式
小程式–儲存圖片到相簿功能實現
2018-11-30
[拆彈時刻]小程式canvas生成海報（二）---優化方案
2019-05-29
Canvas優化
canvas實現二維碼和圖片合成
2019-02-16
Canvas
微信小程式：小程式碼、小程式二維碼、普通二維碼
2018-04-27
微信小程式
小程式 canvas 生成海報一次搞掂
2019-09-28
Canvas
WebView實現長按儲存圖片長按識別二維碼
2019-03-04
WebView
小程式–關於小程式未上線二維碼識別功能開發
2018-04-03
從微信小程式開發者工具原始碼看實現原理（二）- - 小程式技術實現
2019-07-22
微信小程式原始碼
js實現canvas儲存圖片為png格式並下載到本地
2018-05-22
JSCanvas
實現小程式canvas拖拽功能
2018-09-03
Canvas
生成小程式二維碼(二進位制資料流轉圖片儲存上傳七牛)
2021-12-01
Vue生成分享海報(含二維碼)
2019-03-28
Vue
【資料結構】二叉樹（順序儲存、鏈式儲存）的JAVA程式碼實現
2018-03-31
資料結構二叉樹Java
幾行程式碼教你解決微信生成海報及二維碼
2020-11-23
行程
Tp生成小程式二維碼
2020-08-18
獲取小程式二維碼
2018-06-26
利用Kubernetes實現容器的持久化儲存
2019-01-30
持久化
[填坑手冊]小程式Canvas生成海報（一）---完整流程
2019-05-23
Canvas
OceanBase 儲存層程式碼解讀（二）微塊儲存格式
2021-10-13
深入解析微信小程式頁面中實現的儲存圖片（附程式碼）
2021-09-11
微信小程式
小程式海報最佳實現思路，視覺化編輯直接生成程式碼使用
2019-09-25
視覺化
react小專案 - canvas海報生成器
2018-05-02
ReactCanvas
『小程式開發』關於微信小程式掃普通連結二維碼開啟小程式的具體配置流程
2019-03-04
微信小程式
微信小程式掃描普通二維碼開啟小程式的方法
2021-12-03
微信小程式
利用Node實現HTML5離線儲存
2020-09-22
HTML
網頁長按儲存及識別二維碼
2022-07-13
網頁
10行程式碼實現微信小程式支付功能，使用小程式雲開發實現小程式支付功能（
2021-09-09
行程微信小程式
微信H5實現網頁長按儲存圖片及識別二維碼
2018-08-19
H5網頁
【微信小程式canvas】實現小程式手寫板使用者簽名(附程式碼)
2018-09-18
微信小程式Canvas
小程式入門到實戰（二）--案例原始碼分享
2018-09-13
原始碼
200 行程式碼實現基於 Paxos 的 KV 儲存
2022-05-20
行程
java實現二維碼生成
2018-06-06
Java