小程序生成海報：經過 json 配置方式輕鬆製做一張海報圖

背景

因爲咱們沒法將小程序直接分享到朋友圈，但分享到朋友圈的需求又不少，業界目前的作法是利用小程序的 Canvas 功能生成一張帶有二維碼的圖片，而後引導用戶下載圖片到本地後再分享到朋友圈。而小程序 Canvas 功能是很難用的，每每爲了繪製一張簡單圖片，就得寫上一堆 boilerplate code ，並且一不當心還會踩到 Canvas 的各類彩蛋（坑）。我想此時你的心情確定是這樣的。

分析

想到小程序中有如此大量的生成圖片需求，而 Canvas 生成方法又是如此難用和坑爹。那咱們就想到可不能夠作一款能夠很方便生成圖片，而且還能屏蔽掉直接使用 Canvas 的一些坑的庫呢？因此咱們發起了 「畫家計劃— 經過 json 數據形式，來進行動態渲染並繪製出圖片」。 Painter 庫的總體架構以下：

首先，咱們定義了一套繪圖 JSON 規範，開發者能夠根據需求構建生成圖片的 Palette（調色板），而後在程序運行過程當中把調色板傳入給 Painter（畫家）。Painter 會調用 Pen（畫筆），根據 Palette 內容繪製出對應的圖片後返回。

解決問題

那可不能夠開發一款生成海報的插件庫呢?

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

###隆重介紹

Painter 的優點

• 功能全，支持文本、圖片、矩形、qrcode 類型的 view 繪製
• 佈局全，支持多種佈局方式，如 align（對齊方式）、rotate（旋轉）
• 支持漸變色，陰影，配置簡單，容易上手，兼容性好
• 支持圓角，其中圖片，矩形，和整個畫布支持 borderRadius 來設置圓角
• 槓槓的性能優化，咱們對網絡素材圖片加載實現了一套 LRU 存儲機制，不用重複下載素材圖片。
• 槓槓的容錯，由於某些特殊狀況會致使 Canvas 繪圖不完整。咱們對此加入了對結果圖片進行檢測機制，若是繪圖出錯會進行重繪。

How To Use

運行例子

git clone https://github.com/Kujiale-Mobile/Painter.git
複製代碼

代碼下載後，用小程序 IDE 打開後便可使用。

注：請選擇小程序項目，非小遊戲，例子中無 appid，因此沒法在手機上運行，若是須要真機調試，請在打開例子時，填上本身的小程序 id

具體詳細使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter

擴展工具

因爲編寫配置再加上調試仍是有些麻煩,故製做一款可視化編輯工具,直接拖動編輯元素便可生成海報 可視化編輯拖拽直接生成painter代碼

• 工具體驗地址lingxiaoyi.github.io/painter-cus…
• 工具使用文檔juejin.im/post/5d8b20…

例子展現