背景

在做小程式時候，我們經常會有一個需求，需要將小程式分享到朋友圈，但是朋友圈是不允許直接分享小程式，那我們還有其他的辦法解決嗎?答案肯定是有的，即 canvas 生成個性化海報分享圖片到朋友圈

分析

1. 小程式中有大量的生成圖片需求，但是使用過 canvas 的人，都會發現一些難以預料的問題>>有關小程式的坑
2. 直接在 canvas 上繪製圖形，對於普通開發者來說程式碼會特別凌亂並且難以維護，經常會花費很久的時間去優化程式碼
3. 不同的環境渲染問題，例如在開發者工具看起來好好的，一到 Android 真機，就出現圖片不顯示，位置不對應等等問題

解決

那可不可以開發一款生成海報的外掛庫呢?

• 首先，只需要提供一份簡單的引數配置檔案即可
• 解決掉小程式Canvas遇到的一些大大小小的坑
• 有嚴苛的測試環節，解決各種環境和各種機型遇到的問題，並提供穩定的線上版本
• 長期維護，並有專人更新迭代更新穎的功能

以上的要求當然是可以的，曾經的我也想嘗試開發一款出來，但是後來嘗試了幾款現成的工具之後就放棄了，畢竟輪子這個東西，是需要不斷維護更新的，另外已經有這麼多優秀現成的外掛了，我為何還要費力去寫呢，貢獻程式碼豈不更美哉，以下是我收集的幾款

• 小程式生成圖片庫，輕鬆通過json 方式繪製一張可以發到朋友圈的圖片>>Painter
• 小程式元件-小程式海報元件>>wxa-plugin-canvas
• 微信小程式：一個json 幫你完成分享朋友圈圖片>>mp_canvas_drawer

我想幹什麼

嘮了這麼多，好像提供給大家外掛就沒我什麼事情了...想走是不可能的
為了能夠製作出更酷炫的海報，我思考了許久
雖然有了外掛後，只需要提供配置程式碼就能夠製作出一款海報來，但是我發現還是有些許問題

1. 製作海報效率還是不夠高，微調一個元素的大小和位置，就需要不斷的修改儲存程式碼，等待片刻，檢視效果，真的煩
2. 一個小小的位置調整可能就需要來回調整無數次，這種最簡單的機械化勞動，這輩子是不可能的
3. 拿著完美的稿子，遞給設計師看，這個位置不對，這個線太粗，這個顏色太重...你信不信我打死你
4. 對於一些精美複雜的海報，實現起來真的不太現實

那我需要怎麼做呢，請點選這個連結體驗>>painter-custom-poster
點選左側例子展示中的任意一個例子，然後匯入程式碼就能看到效果圖，這下你應該能猜到了我的想法了

如何實現

• 剛開始我想用簡單的html和css加拖動功能實現，通過簡單嘗試之後就放棄了，因為這個功能真的太複雜了，簡單的工具肯定是不行的
• 中間這個計劃停滯了很長時間，一度已經放棄
• 直到發現了這個庫fabric.js，真的太太優秀了，讚美之詞無以言表，唯一的缺點就是中文教程太少，必須生啃英文加谷歌翻譯
• fabric介紹，你可以很容易地建立任何一個簡單的形狀，複雜的形狀，影象;將它們新增到畫布中，並以任何你想要的方式進行修改：位置、尺寸、角度、顏色、筆畫、不透明度等

How To Use

目前工具一共分成4部分

例子展示

用來將一些使用者設計的精美海報顯示出來，通過點選對應的例子並將程式碼匯入畫布中

畫布區

顯示真實的海報效果，畫布裡新增的元素，都可以直接用滑鼠進行拖動，旋轉，縮放操作

操作區

第一排四個按鈕

1. 複製程式碼 將畫布的展示效果轉化成小程式海報外掛庫所需要的json配置程式碼，目前我使用的是Painter庫，預設會轉化成這個外掛的配置程式碼，將程式碼直接複製到card.js即可
2. 檢視程式碼 這個功能用不用無所謂，可以直觀的看到生成的程式碼
3. 匯出json 將畫布轉化成fabric所需要的json程式碼，方便將自己設計的海報程式碼儲存下來
4. 匯入json 將第3步匯出的json程式碼匯入，會在畫布上顯示已設計的海報樣式

第二排五個按鈕

1. 畫布 畫布的屬性引數 詳解見下方
2. 文字 新增文字的屬性引數 詳解見下方
3. 矩形 新增矩形的屬性引數 詳解見下方
4. 圖片 新增圖片的屬性引數 詳解見下方
5. 二維碼 新增二維碼的屬性引數 詳解見下方

第三排

各種元素的詳細設定引數

啟用區

啟用物件是指滑鼠點選畫布上的元素，該物件會被藍色的邊框覆蓋，此時該物件被啟用，可以執行拖動 旋轉 縮放等操作
啟用區只有物件被啟用才會出來，用來設定啟用物件的各種配置引數，修改value值後，實時更新當前啟用物件的對應狀態，點選其他區域，此模組將隱藏

快捷鍵

• 'ctrl + ←' 左移啟用物件一畫素
• 'ctrl + →' 右移啟用物件一畫素
• 'ctrl + ↑' 上移啟用物件一畫素
• 'ctrl + ↓' 下移啟用物件一畫素
• 'ctrl + z' 撤銷
• 'ctrl + y' 撤銷
• 'delete' 刪除
• '[' 提高元素的層級
• ']' 降低元素的層級

佈局屬性

通用佈局屬性

shadow

可以同時修飾 image、rect、text 等 。在修飾 text 時則相當於 text-shadow；修飾 image 和 rect 時相當於 box-shadow

使用方法：

shadow: 'h-shadow v-shadow blur color';
h-shadow: 必需。水平陰影的位置。允許負值。
v-shadow: 必需。垂直陰影的位置。允許負值。
blur: 必需。模糊的距離。
color: 必需。陰影的顏色。
舉例: shadow:10 10 5 #888888

漸變色支援

你可以在畫布的 background 屬性中使用以下方式實現 css 3 的漸變色，其中 radial-gradient 漸變的圓心為 中點，半徑為最長邊，目前不支援自己設定。

linear-gradient(-135deg， blue 0%， rgba(18， 52， 86， 1) 20%， #987 80%)

radial-gradient(rgba(0， 0， 0， 0) 5%， #0ff 15%， #f0f 60%)

！！！注意：顏色後面的百分比一定得寫。

畫布屬性

文字屬性

備註:

• fontFamily，工具中的第一個例子支援文字字型，但是匯入小程式為什麼看不到呢，小程式官網載入網路字型方法>>載入字型教程>>
• 文字高度 是maxLines lineHeight2個欄位一起計算出來的

圖片屬性

mode引數詳解

• scaleToFill 縮放圖片到固定的寬高
• aspectFill 圖片裁剪顯示對應的寬高
• auto 自動填充 寬度全顯示 高度自適應居中顯示

Tips（一定要看哦～）

• painter現在只支援這幾種圖形，所以暫不支援圓，線等
• 如果編輯過程，一個元素被擋住了，無法操作，請選擇物件並通過[ ]快捷鍵提高降低元素的層級
• 文字暫不支援直接縮放操作，因為文字大小和元素高度不容易計算，可以通過修改啟用欄目maxLines lineHeight fontSize值來動態改變元素
• 如發現匯出的程式碼一個元素被另一個元素擋住了，請手動調整元素的位置，json陣列中元素越往後層級顯示就越高，由於painter沒有提供層級引數，所以目前只能這樣做
• 本工具匯出程式碼全是以px為單位，為什麼不支援rpx， 因為painter在rpx單位下，陰影和邊框寬會出現大小計算問題，由於原例子沒有提供px生成圖片方案，可以下載我這裡修改過的demo>>Painter即可解決
• 文字寬度隨著字數不同而動態變化，想在文字後面加個圖示根據文字區域長度佈局， 請參考Painter文件這塊教程直接修改原始碼
• 由於本工具開發有些許難度，如出現bug，建議或者使用上的問題，請提issue，原始碼地址>>painter-custom-poster

海報貢獻

如果你設計的海報很好看，並且願意開源貢獻，可以貢獻你的海報程式碼和縮圖，例子程式碼檔案在example中，按順序排列，例如現在庫裡例子是example2.js，那你新增example3.js和example3.jpg圖片，事例可以參考一下資料夾中原始碼，然後在index.js中匯出一下

匯出程式碼

程式碼不要格式化，會報錯，請原模原樣複製到json欄位裡

廣州VI設計公司https://www.houdianzi.com

生成縮圖

• 剛開始我想在此工具中直接生成圖片，但是由於瀏覽器圖片跨域問題導致報錯失敗
• 所以請去小程式中生成儲存圖片，圖片質量設定0.2，並去tinypng壓縮一下圖片
• 找到painter.js，替換下邊這個方法，可以生成0.2質量的圖片，程式碼如下

  saveImgToLocal() {
      const that = this;
      setTimeout(() => {
        wx.canvasToTempFilePath(
          {
            canvasId: 'k-canvas'，
            fileType: 'jpg'，
            quality: 0.2，
            success: function(res) {
              that.getImageInfo(res.tempFilePath);
            }，
            fail: function(error) {
              console.error(`canvasToTempFilePath failed， ${JSON.stringify(error)}`);
              that.triggerEvent('imgErr'， { error: error });
            }
          }，
          this
        );
      }， 300);
    }

TODO

• [ ] 顏色值選擇支援調色盤工具
• [ ] 文字padding支援
• [ ] 縮放位置彈跳問題優化
• [ ] 假如需求大的話，支援其他幾款外掛庫程式碼的生成