【微信小程序】canvas繪製海報插件（圓形頭像，圓角圖片，漸變圓角矩形，單行文本，多行文本，繪製base64圖片）

canvas繪製海報插件

其功能包括：

1. 繪製圓形頭像
2. 繪製圓角矩形
3. 繪製單行文本
4. 繪製多行文本
5. 繪製base64圖片
複製代碼

像日常開發頁面通常，根據設計稿標註傳入rpx單位的數字就行

使用方法

1. const drawD = require('../../utils/canvasDraw.js');
2. let draw = new drawD.canvasDraw('shareImg', that); // 參數爲canvas-id , 和當前this對象
3. draw.XXX 能夠調用API中的方法，支持鏈式調用

注：爲保證繪製出來的圖片清晰，寬度和高度分別進行了2倍放大

data: {
    width: app.globalData.windowWidth * 2, // canvas 大小    
    height: app.globalData.windowHeight * 2,
  },
複製代碼

插件地址       API 地址

demo1源碼

demo2源碼

因爲canvas不能處理網絡圖片，因此要先拿到圖片的臨時路徑, getImagesInfo(imgArr) 傳入一個圖片字符串數組，調用wx.getImageInfo方法，返回圖片的臨時路徑及寬高等信息

注： 微信頭像要使用wx.downloadFile來獲取來獲取臨時路徑，並配置域名白名單

let that = this;
let draw = new drawD.canvasDraw('shareImg', that);  // canvas-id  和當前this對象
複製代碼

功能1： 繪製圓形頭像

// x 座標, y 座標,  圓半徑, 圖片路徑
draw.drawCricleImg(50, 50, 35, logo)
複製代碼

注：x, y, 半徑根據設計稿標註的大小傳入數字就能夠，當設計寬度爲750px時

例如： 設計稿中頭像距離左邊50px,上邊50px, 開發頁面的時候寫的樣式就是50rpx, 這裏直接傳入50就好

原理:

this.ctx.arc(centerX, centerY, r, 0, 2 * Math.PI, false)//畫一個圓形裁剪區域
this.ctx.clip()//裁剪
this.ctx.drawImage(logo, x, y, w, w)//繪製圖片
複製代碼

功能2： 繪製圓角圖片

方法1：

// img, sx, sy, swidth, sheight, x, y, width, height的用法用於drawImage(img, sx, sy, swidth, sheight, x, y, width, height)
// r 圓角半徑
// bgColor 背景色
draw.drawFilletImg(img, sx, sy, swidth, sheight, x, y, width, height, r, bgColor = '#fff')
複製代碼

方法2：

// img, x, y, width, height的用法用於drawImage(img, x, y, width, height)
// r 圓角半徑
// bgColor 背景色
draw.drawFilletFillImg(img, x, y, width, height, r, bgColor = '#fff')
複製代碼

注： swidth, sheight， width, height 傳入的值爲字符串 例如： '650px' 或 '650rpx'

sx, sy, x, y 單位均是rpx

原理:

左右兩種圓角的部分, 左邊是用背景色繪製了四個圓角，右邊是用黑色繪製了四個圓角
繪製四個角的方法參考canvasDraw.js中的 roundRect(x, y, w, h, r, c) 方法

功能3： 單行文本

draw.drawText(str, x, y, fontSize, color, align = 'left')

注：x, y, fontSize根據設計稿標註的大小傳入數字，單位爲rpx

原理:

ctx.setFontSize(fontSize)
ctx.setTextAlign(align);
ctx.setFillStyle(color)
ctx.fillText(str, x, y);
複製代碼

功能4： 多行文本

// 文本, x座標，y座標，文本最大寬度， 字體大小，最多顯示幾行， 顏色，對齊方法，末尾佔位符
drawMultiLineText(str, x, y, width, fontSize, maxRow, color = '#000', align = 'left', suffixStr = '...')
#### 注：x, y, width, fontSize根據設計稿標註的大小傳入數字，單位爲rpx

例如：
drawMultiLineText(activityContent, 50, draw.nowHeight + 20, 650, 26, 3, '#666666')
複製代碼

注：draw.nowHeight (rpx) 能夠得到當前繪製的最後一個元素的左下角座標，至關於已繪製的canvas高度
那繪製下一個元素y座標爲: draw.nowHeight + (距上一個元素的距離)

功能5： 繪製base64圖片

draw.drawCode(base64Str) 調用此方法能夠生成一個圖片的臨時路徑
複製代碼

例如：

draw.drawCode(base64Str).then((filePath) => {
    ctx.drawImage(filePath, x, y);
});
複製代碼

功能6. drawFinally(callback)

繪製函數，會執行draw()方法,並執行回調，回調中能夠調用canvasToPosterImg(destWidth, canvasHeight, callback)將canvas轉爲圖片

功能7. canvasToPosterImg(destWidth, canvasHeight, callback)

// destWidth 生成圖片，圖片的目標寬度，單位爲px
// canvasHeight canvas的高度，單位爲px
draw.canvasToPosterImg(destWidth, canvasHeight, callback)
複製代碼

功能8. drawFilletFillRect(x, y, width, height, r, isGrd, drawColor, bgColor = '#fff') 繪製漸變圓角矩形

// 用法同繪製圓角圖片
isGrd true | false   是否漸變
drawColor Array    繪製矩形顏色數組，  漸變時數組傳兩個值，不漸變傳一個值
複製代碼

demo1的代碼片斷

js

// pages/drawPosterTest.js
const drawD = require('../../utils/canvasDraw.js');
const app = getApp();
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    width: wx.getSystemInfoSync().windowWidth * 2,
    height: wx.getSystemInfoSync().windowHeight * 2,
    imageWidth: 0,
    imageHeight: 0
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let that = this;
    let draw = new drawD.canvasDraw('poster', that);
    let logo = 'https://avatars0.githubusercontent.com/u/34326830?s=400&u=2e69fbfaf577e896d414788c869e265e0d449a1b&v=4';
    let themeImg = 'https://orangleli.github.io/imagesResources/1.jpg';
    draw.getImagesInfo([themeImg, logo]).then((res) => {
      themeImg = res[0].path;
      logo = res[1].path;
      that.setData({
        imageWidth: res[0].width,
        imageHeight: res[0].height
      });
      that.drawShareImage(draw, themeImg, logo);
    })
  },
  drawShareImage(draw, themeImg, logo){
    let that = this; let drawHeight = 0;
    let x = 0, y = 0;
    let imageWidth = that.data.imageWidth;
    let imageHeight = that.data.imageHeight;

    drawHeight = (650 / imageWidth) * imageHeight;

    let part = '你身體裏的每個原子都來自一顆爆炸了的恆星。造成你左手的原子可能和造成你右手的來自不一樣的恆星。這是我所知的關於物理的最有詩意的事情：大家都是星塵。'

    draw
      .drawFilletFillImg(themeImg, 50, 50, 650, drawHeight, 10)
      .drawMultiLineText(part, 50, draw.nowHeight + 30, 650, 30, 0, '#000')
      .drawMultiLineText(part, 50, draw.nowHeight + 40, 650, 30, 1, '#000')
      .drawText('——《這裏是出處》', 650 + 50, draw.nowHeight + 60, 30, '#000', 'right')
      .drawText('2019.09.06', 650 + 50, draw.nowHeight + 30, 32, 'rgba(34,34,34,.64)', 'right')
      .drawCricleImg(650, draw.nowHeight + 10, 25, logo)
      .drawFinally(function (ctx, nowHeight) {
        let canvasHeight = draw.getPx(nowHeight + 30);
        that.setData({
          height: canvasHeight
        })
        draw.drawEndImg(750, canvasHeight, function(res) {
          wx.hideLoading();
          that.setData({
            endImg: res.tempFilePath,
            isFinished: true
          })
        });
      });
  },
})
複製代碼

wxml

<canvas class="posterCanvas offScreen" style="width: {{width}}px;height:{{height}}px;" canvas-id="poster"></canvas>
<image class="poster" src="{{endImg}}" mode='widthFix'></image>
複製代碼

wxss

.posterCanvas{
  background-color: #fff;
}
.offScreen{
  position: fixed;
  top: -99999px;
  left: -99999px;
}
.posterCanvas{
  width: 100%;
}
.poster{
  width: 100%;
  background-color: #fff;
}
複製代碼

說明：

1. 此demo1繪製的圖片爲透明背景色， 能夠自行繪製圖片背景或者純色背景
2. demo2中有繪製背景色的代碼：drawPoster/drawPoster.js/changeBgToWhite()
3. 先設置背景色，再進行繪製的方法，會影響圓形頭像的繪製，能夠本身試一下

圖片保存到相冊

demo2中有完整實例

點擊保存圖片，當wx.saveImageToPhotosAlbum方法進入fail時： that.setData({ toAuthorize: true })
顯示自定義組件彈框 components/authorizeModal/authorizeModal

這個彈框樣式有些醜，emmm...

wx.saveImageToPhotosAlbum({
    filePath: that.data.endImg,
    success: function (re) {
      wx.showToast({
        title: '保存成功',
      });
      that.closeShareModal();
    },
    fail: function (err) {
      console.log(err)
      if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {
        console.log("打開設置窗口");
        that.setData({
          toAuthorize: true
        })
      }
    }
    })
複製代碼

<button open-type="openSetting">
複製代碼

點擊 去受權 按鈕 打開受權列表頁，此按鈕綁定toAuthorizeClick點擊事件，隱藏自定義組件彈框authorizeModal

最後：

插件地址       API 地址

demo1源碼

demo2源碼

結束 🎉🎉