在小程序中使用canvas

一直沒有怎麼使用過canvas，小程序也是之前看過一個視頻而已，想要找個例子結合一下兩者。所以一個小小的保存圖片作爲朋友圈相冊封面的demo就這麼出現了，在這裏主要記錄一下自己遇到的一些問題以及解決的辦法。

截圖：

主要是以下幾個問題：

1.顏色選擇器

2.頁面通信

3.組件間通信

4.canvas（生成圖片、預覽/保存、文字換行）

1.顏色選擇器

從小程序的文檔中沒有找到相應的顏色選擇組件，昨天（18.3.13）小程序插件功能上線了，小夥伴們也可以選擇插件。寫這個demo是在前兩天寫的，所以自己就實現了一個簡單的顏色選擇。

鑑於組件的複用，而目前小程序的自定義組件只能擁有自己的wxml 模版和 wxss 樣式，js的處理還是需要在引用組件的父組件中處理，所以換了一種方式實現顏色的選擇：跳到新頁面中選擇。

備註：使用數據緩存（setStorageSync），以免一些數據被重新初始化

  /* 選擇顏色
  ob: 對象
  value：顏色值 */
  changeColor: function(e) {
    var value = e.target.dataset.value;
    if (this.data.ob && value) {
      wx.setStorageSync(this.data.ob, value);
      wx.navigateTo({
        url: '/pages/wallpaper/wallpaper',
      });
    }
  },

2.頁面通信

數據緩存
navigateTo-url參數

3.組件間通信（data）

<template is="msgItem" data="{{...item}}"/> // 展開
<template is="msgItem" data="{{item}}"/>

4.canvas（生成圖片、預覽/保存、文字換行）

• 生成圖片路徑-canvasToTempFilePath

// 生成圖片
  drawPicture: function(val) {
    const that = this;
    const btnName = val.currentTarget.dataset.btnName;
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success: function (res) {
        if (btnName === 'preview') {
          that.preview(res.tempFilePath);
        } else if (btnName === 'save') {
          that.save(res.tempFilePath);
        }
      },
      fail: function (err) {
        console.log(err);
      }
    })
  },

• 預覽/保存圖片

// 預覽
  preview: function(val) {
    if(val) {
      wx.previewImage({
        urls: [val] // 需要預覽的圖片http鏈接列表
      })
    }
  },
// 保存
  save: function(val) {
    if(val) {
      wx.saveImageToPhotosAlbum({
        filePath: val,
        success: function (res) {
          console.log('成功');
        },
        fail: function (err) {
          console.log('失敗', err);
          if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            wx.openSetting({
              success(settingdata) {
                console.log(settingdata)
                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                  console.log('獲取權限成功，給出再次點擊圖片保存到相冊的提示。')
                } else {
                  console.log('獲取權限失敗，給出不給權限就無法正常使用的提示')
                }
              }
            })
          }
        }
      });
    }
  },

• 文字換行
  參考：http://blog.csdn.net/lishihong108/article/details/52483867

// 裁減-換行(measureText)
    var lastSubStrIndex = 0;
    var dTextWidth = 0;
    var lineHeight = 20; // 行高
    var initX = 10; // 起始X座標
    var initY = canvasHeight / 2; // 起始Y座標
    for(var i = 0; i < dText.length; i++) {
      dTextWidth += ctx.measureText(dText[i]).width;
      if (dTextWidth > canvasWidth - initX) {
        ctx.fillText(dText.substring(lastSubStrIndex, i), initX, initY);
        initY += lineHeight;
        dTextWidth = 0;
        lastSubStrIndex = i;
      }
      if (i == dText.length-1) {
        ctx.fillText(dText.substring(lastSubStrIndex, i + 1), initX, initY);
      }
    }