|
前(qian)一陣(zhen)有完成在小(xiao)程(cheng)序(xu)內動態生成圖(tu)片再進行分(fen)享的需求，是很(hen)常(chang)見(jian)的場景，因此我(wo)抽(chou)出了一個(ge)小(xiao)工具CanvasPainter.js，囊括在小(xiao)程(cheng)序(xu)內canvas畫(hua)圖(tu)基本需求：
-
用配置形式繪圖(暫支持單行及多行文本，矩形，圓形，圖片及圓形圖片類型)，以及支持后續預覽及保存成圖片，且皆為Promise格式。
-
canvas尺寸以一般設計稿的750px為準(可配)，在不同屏幕機型下等比縮放。
-
生成圖片時，支持圖片預下載，及在一個小程序周期內緩存圖片下載的tmp路徑。
demo地(di)址(zhi)
用法
使用也(ye)很簡單(dan)~無需染指(zhi)到(dao)wx.各種api，直(zhi)接配置初始化(hua)+調用對(dui)應方法即可，一條龍服務美滋(zi)(zi)滋(zi)(zi)~
import CanvasPainter from './CanvasPainter';
const config = [
{type:'rect, width: 640, height: 560, x: 0, y: 0, color: '#fff'},
{type: 'text', text: '測試文本', color: '#1499f8',size: 50, x: 30,y: 100}
]
// 初始化
const painter = new CanvasPainter({
canvasId: `canvasId`,
context: this, // 組件內使用需傳this
config //畫圖路徑
});
painter.loadImgInAdvance(); //預下載圖片到本地；如不主動調用，則draw的時候會再下載。
// 更新畫圖路徑
painter.resetConfig(newConfig);
// 畫圖
painter.draw().then(() => {
console.log('畫圖完成');
}).catch(e => {
console.log('生成圖片失敗', e);
});
// 預覽
painter.preview();
// 保存
painter.save().then(() => {
console.log('保存完成');
}).catch(e => {
console.log('保存失敗', e);
});
復制代碼
|
開發過(guo)程中遇到的要(yao)點記(ji)錄如下：
-
如何等比(bi)縮放
因為(wei)canvas繪(hui)圖(tu)時的(de)長度單(dan)位(wei)為(wei)px，所(suo)以(yi)可以(yi)利用小程(cheng)序的(de)canvas.scale()來解決。
const scale = wx.getSystemInfoSync().windowWidth / 750;
this.ctx.scale(scale, scale); // 這樣可以實現以750px尺寸的ui圖等比縮放
復制代碼
-
繪制(zhi)圖片預下載及緩(huan)存
調(diao)用(yong)ctx.drawImage()時，圖片需要(yao)先(xian)下(xia)載(zai)到本(ben)地臨時路(lu)徑(jing)(jing)，這一步耗時較長，所以建議前置進行。臨時路(lu)徑(jing)(jing)的(de)有(you)效(xiao)期為(wei)一個小(xiao)程序周期，所以完全可以緩(huan)存(cun)本(ben)地臨時路(lu)徑(jing)(jing)。這樣重(zhong)復生成canvas時只會下(xia)載(zai)動態圖片，復用(yong)固(gu)定圖片路(lu)徑(jing)(jing)，避(bi)免重(zhong)復下(xia)載(zai)~
另(ling)外圖片域名(ming)需配置在小(xiao)程序后臺，為避免意外，下(xia)載(zai)圖片前應(ying)先對圖片url做一次(ci)校驗，校驗失敗直接跳(tiao)過(guo)下(xia)載(zai)或(huo)換用(yong)兜底圖。
-
下(xia)載圖(tu)片到本地
在save圖(tu)片(pian)前(qian)，需要先調用wx.getSetting()來獲取用戶(hu)是(shi)否已(yi)允許下載(zai)圖(tu)片(pian)到本地權限，或是(shi)喚起請求(qiu)權限彈窗。如果(guo)權限被(bei)拒絕，則最(zui)好給(gei)出(chu)toast提示，同(tong)時把下載(zai)按鈕重置為open-type="openSetting"，用戶(hu)再次(ci)點擊時，引導跳轉至授權頁面。
另外使用(yong)時(shi)也(ye)有兩點不(bu)溫(wen)馨提示：
-
canvas組(zu)件顯(xian)隱控制(zhi)
不建議(yi)將(jiang)canvas組(zu)(zu)件用wx:if控制顯隱，因為將(jiang)canvas組(zu)(zu)件掛(gua)載至頁(ye)面后，要(yao)經過200ms左右的延遲才能draw()成功。建議(yi)直接用display:none/block來控制，這樣也方便實現圖片預下載。
-
結(jie)合業務抽離組件
建(jian)議結合當前(qian)業(ye)務將生成分享(xiang)圖(tu)功能進一步抽(chou)離成組件，包括內嵌點擊canvas預覽圖(tu)片(pian)，保存canvas為圖(tu)片(pian)按鈕(兼容未授權(quan)下載圖(tu)片(pian)跳轉授權(quan)頁情況)等。亦(yi)可更靈活(huo)的自由控制畫(hua)圖(tu)及更新畫(hua)圖(tu)的時機。
注意到這兩點后，就可以分分鐘(zhong)擼出一個動態生成圖啦(la)~
附：完整API
初始化
new CanvasPainter(options)
options
canvsId: canvas-id。
context: canvas使用時上下文，在組件內使用時傳入this即可。
config: Array[]。繪圖路徑。支持類型如下：
rect 矩形
完整配置：{
type: 'rect',
width: 640,
height: 560,
x:0,
y:0,
color: '#fff', // fill下為填充顏色，storke下為筆跡顏色
stroke(可選): true, // 代表模式為fill還是stroke。默認false，即fill狀態。
round(可選): true, // 代表是否為圓形。默認false。
}
復制代碼
text 文本
完整配置：{
type: 'text',
x:0,
y:30,
color: '#fff', // 字色
font: 'xx', // 字體
size: 20, //字號
align: 'center', //對齊。默認left。
decoration(可選): 'line-through', // 暫時只有中劃線模式哈哈哈
}
復制代碼
multiline_text 多行文本
完整配置：{
type: 'multiline_text',
line_limit: 30, //每行字數
line_height: 20, //行高
... //其余都與text一致
}
復制代碼
image 圖片
完整配置：{
type: 'image',
url: '', //圖片路徑
x: '', y: '', width: '', height:'',
round(可選): true, // 圓形。默認false。
}
復制代碼
|
預下載圖片：
canvasPainter.loadImgInAdvance()。可在實例(li)化CanvasPainter后立即調用(yong)。
繪圖:
canvasPainter.draw()
預覽大圖:
canvasPainter.preview()
保存成圖片:
canvasPainter.save()
更改config：
canvasPainter.resetConfig(newConfig)
|
