前言

大家都知道小程序分享海報圖的好處，不然也不會找到這篇文章，但是都苦于沒有一套完善、通用、易用的方案，你能搜到的文章也都是一知半解，零零碎碎，我這人最受不了的就是沒有章法，今天這篇文章將會徹底解決這個問題。

工欲善其事必先利其器，我要自己擼一個工具，這次不僅要解決，還要完美地解決，用了它，產(chǎn)品上午提出需求要做個分享海報，我們下午吃個飯的功夫就能搞出來，別不信，我來告訴你怎么做到。

CanvasDrawer

沒錯，這就是這個工具的名字，翻譯過來就是Canvas抽屜，為什么不叫CanvasPoster？ 因為它的功能不止可以繪制海報，這個我們后面再說。

我們先看一下該工具可以實現(xiàn)的效果：

引入工具后，實現(xiàn)這個海報的代碼沒有超過100行，因為你只需要告訴工具你要繪制的圖片或文字的位置，大小，顏色，其他都不用操心，怎么樣，有沒有引起你的興趣？

接下來，我?guī)阋徊揭徊搅私馑?，了解之后?yīng)用自然也不在話下了。

功能特點

1. 支持繪制圖片

   • 支持可選是否自動切成圓角圖片
   • 支持圓角模式下設(shè)置邊框?qū)挾?，以及邊框顏?

     該選項針對你要生成二維碼的場景極其有用

2. 支持繪制文本

   • 支持批量繪制文本
   • 支持繪制單行動態(tài)文本，并可以自定義文本左右間距

     暫不支持動態(tài)文本換行，后續(xù)會考慮加入此功能

   • 支持自定義文本顏色、字號、字重、對齊方式

     例如上圖中的“共省下69.86元”文案，69.86是動態(tài)獲取的數(shù)據(jù)，可能存在6.6的情況，也可能存在6666.66的情況，文本的長度是不確定的，但是不用擔心，工具內(nèi)會自動計算好文本的長度，按你提供的間距自動渲染好位置。

3. 支持繪制圖形

   • 可以繪制簡單的圓和矩形，復雜的圖形使用圖片更好，沒必要花費額外的性能去自己繪制

4. 使用canvas2d實現(xiàn)，支持同層渲染且性能更佳。

那么我們?nèi)绾问褂茫?

使用方法

安裝

npm install mp-canvas-drawer --save 復制代碼

先在頁面或組件的wxml中添加canvas組件，寬高照你的實際設(shè)計稿寬高定義就行，px的話一般就是375的稿，rpx就是750的稿。

<canvas type="2d" id="myCanvas" class="canvas" style="width: {{width}}rpx; height: {{height}}rpx" ></canvas> 復制代碼

在頁面或組件中導入，并且初始化

import W2P from './canvasDrawer'; onLoad(){ this.w2p = new W2P('#myCanvas', this, { bgColor: '#ffffff', radius: 32 }); this.w2p.init().then(() => { this.drawSharePoster(); // 初始化完成后就可以開始畫了 });
} 復制代碼

工具類接受以下參數(shù)：

new W2P(canvasId, instance, container, designWindowWidth) 復制代碼

開始繪制海報

// 繪制分享海報 async drawSharePoster(){ // 繪制背景圖，填寫圖片資源，起始點坐標（x, y），寬高 await this.w2p.drawImage('https://.../a.png', 0, 0, 618, 868); const adjustTimes = await geAdjustTimes(); // 這里只是舉例，使用時動態(tài)數(shù)據(jù)建議提前獲取 /* 繪制具有動態(tài)文本的行 */ this.w2p.drawDynamicTextsRow({ texts: ['2022年，油價經(jīng)歷', adjustTimes, '次調(diào)整'], // 該行要繪制的文本 originX: 48, // 該行起始x坐標，即文本距離海報容器左邊框的距離 // 以下參數(shù)既可作為通用參數(shù)，也可作為個性化參數(shù)，填寫個性化參數(shù)后會覆蓋通用參數(shù)值 originY: 239, // 該行起始y坐標，即文本距離海報容器上邊框的距離 textMargin: 10, // 文本左間距（從第二個文本開始生效） size: 28, // 該行字體大小 bold: 600, // 文字字重 color: '#470D00', // 該行文字顏色 }); /* 繪制動態(tài)文本行，并且個性化插入文本 */ this.w2p.drawDynamicTextsRow({ texts: [
          { text: '我在XXXX共加油' }, // 數(shù)字樣式個性化突出 { text: useTimes, color: '#F44505', size: 44, originY: 369 },
          { text: '次' },
        ], originX: 48, originY: 380, textMargin: 10, size: 28, color: '#470D00' }); // 繪制靜態(tài)文本 // 參數(shù)依次為：文本 | x | y | 字號 | 顏色 | 字重 | 水平對齊方式可選left（不傳默認）、center、right| 垂直對齊方式可選top（默認）、middle、bottom this.w2p.drawText('長按掃碼', 172, 552, 28, '#000000', 600, 'left', 'top' ); // 批量繪制文本 const texts = [
      { text: '長按掃碼', x: 172, y: 552, size: 28, bold: 500, color: '#000000' },
      { text: '查看你的城市油價排名', x: 172, y: 592, size: 28, bold: 600, color: '#eeeeee' },
    ]; this.w2p.drawTexts(texts); // 給圖片繪制邊框（二維碼場景常用） // 參數(shù)依次為：圖片鏈接 | x | y | 寬 | 高 | 是否切成圓形 | 圓形模式下邊框?qū)挾葇 圓形模式下邊框顏色 await this.w2p.drawImage('https://.../qrcode.png', 48, 516, 104, 104, true, 20, '#ffffff'); // 繪制簡單的圓形 // 參數(shù)依次為：x | y | 半徑 | 顏色 | 樣式可選填充fill（默認）、線stroke this.w2p.drawCircular(123, 456, 20, color = '#ffffff', 'fill') // 繪制簡單的矩形 // 參數(shù)依次為：x | y | 寬 | 高 | 圓角默認0 | 顏色 | 樣式可選填充fill（默認）、線stroke this.w2p.drawRect(123, 456, 40, 40, 6, color = '#666666', 'stroke')

} 復制代碼

添加二維碼邊框后效果如圖：

注意： 如果你使用750的設(shè)計稿，那你傳給工具的所有參數(shù)都要是以750位基準的rpx值

到這里，這個工具的繪制功能就講完了，是不是迫不及待想去試一試了，別急，前面只是說了它的canvas繪制能力，還有一部分配套功能可以讓你再少寫些代碼。

如果僅繪制不需要分享場景的話，那你掌握上面那些就足夠用了。

繪制海報的目的就是要讓用戶分享出去，所以必然少不了把圖片保存到相冊的流程。

import W2P from './canvasDrawer'; onLoad(){
  wx.showLoading({ title: '請稍等...', mask: true }); this.w2p = new W2P('#myCanvas', { bgColor: '#ffffff', radius: 32 }, this); this.w2p.init().then(() => { this.drawSharePoster(); // 初始化完成后就可以開始畫了 // 元素畫完后，調(diào)用canvasExport方法把畫布導出，之后就可以調(diào)用saveImage讓用戶把圖片保存到相冊了。 // 注意導出完成之后再允許用戶操作保存 this.w2p.canvasExport().then(() => wx.hideLoading());
  });
} 復制代碼

然后給你的按鈕添加事件，用戶點擊時調(diào)用this.w2p.saveImage()，該方法也會返回Promise，你可以在保存成功或失敗后做些什么。

this.w2p.saveImage()
   .catch(() => {...})
   .then(() => {...}); 復制代碼

例如toast告知用戶結(jié)果？這個不需要你來做，工具內(nèi)已經(jīng)做好了相應(yīng)提示，成功時會提示 “保存成功”，失敗時會提示“保存失敗，請重試”，當然如果你不想要這個提示，可以這樣寫

this.w2p.saveImage({customSuccToast: true, customFailToast: true})
   .catch(() => {...}) // 然后你就可以自己寫失敗時或成功時的toast了 .then(() => {...}); 復制代碼

還沒完，保存圖片到相冊需要用戶進行授權(quán)，這個工具也幫你做了：

在保存時它會先查詢有沒有授權(quán)，授權(quán)過則保存圖片，如果沒有授權(quán)會拉起授權(quán)彈窗，如果用戶同意則保存圖片。

如果用戶拒絕則展示彈窗再提示一下“監(jiān)測到您沒有授權(quán)保存到相冊權(quán)限，無法使用該功能，是否去授權(quán)？”，如果用戶點擊確定會跳轉(zhuǎn)到授權(quán)頁授權(quán)，用戶再次點擊保存按鈕時就會獲取到新的權(quán)限狀態(tài)了。

以后再遇到分享海報需求再也不用愁了，半小時搞定它！感興趣的同學可自行查看js版本源碼