在小程序界里，生成圖片分享到朋友圈這個功能，是如此得光芒耀眼，以至于各個小程序都趨之若鶩地前來跪倒在她的石榴裙下。不幸的是，微信爸爸并沒有提供給我們很好很便捷的相關工具；恰恰相反，屏幕截屏的功能被殘忍丟進歷史的垃圾桶，只留下一個Canvas組件以及圍繞在其周圍的深淵巨坑們。

所以我們準備了一套名為Painter的工具， 為開發者提供一種簡單實用的“繪制”圖片的解決思路，讓開發者可以自由地生成自己想要的圖片文件。

github傳送門：github.com/Kujiale-Mob…

如果直接使用canvas進行繪圖，那絕對是很酸爽的一次體驗，除了失控的代碼，還有無數的天坑。先來列舉一下canvas 中踩過的坑以及我們的解決（或繞過）的方法。

canvas的坑

painter從實現上來講，是用了小程序的canvas作為載體來實現以上功能的。而canvas有很多著名的坑。有的坑，我們小心翼翼地繞了過去；有的坑，我們還是痛快淋漓地一腳踩了下去……

在微信版本6.6.6的某些ios機型上，canvas的clip()方法不能被restore。導致在這些機型上無法進行切圓角的操作。迫于無奈在開發中我們不得已拋棄了這些機型，用了一個if語句將這些機器的切圓角功能閹割了。。。

小程序的canvas提供了measuretText()方法，暫時只支持測量文本寬度，無法知道文字的具體高度。因此一些元素對齊的需求無法做到很漂亮。

在繪制圖片的時候，有幾率會發生很神奇的表現，即canvas繪圖的時候位置出現整體偏差，造成最后生成的圖片有殘缺。這種情況大多數時候發生在onLoad中調用painter的情況下。我們處理的方法是對圖片的寬和高比例進行檢測，一旦出現異常，就重新繪制一遍。

canvas不能繪制網絡圖片。canvas.drawImage(url)方法，給url傳入一個網絡鏈接，在模擬器上表現完美，然而在真機上無法繪制。我們在Painter中引入了一套自己的網絡圖片下載后繪制的機制，并在其中加入了LRU存儲管理機制。

canvas是原生組件，始終位于視圖的最上層，z-index設置對其無效。這個就不多說了。。很多人應該都踩過。

canvas要進行繪制，則canvas組件必須真實地被寫在頁面上，而且其wx:if不能為false。不過，允許把canvas組件放置在屏幕之外，如設置position:fixed;left:750rpx;。這一方法是可以解決5，6兩點問題的黑科技

Painter的功能

如圖所示

通過右邊的類似于css又有點像json但其實上它是個js的寥寥幾行代碼，我們繪制出了左邊的這樣的圖形，包含了背景圖片、文字、圖片、二維碼這四種常用的元素。

Painter閱讀完代碼，繪制成圖片以后，會將圖片的鏈接返回給我們。此時，我們可以將圖片上傳、保存到本地或者顯示在屏幕上。

它可以很方便地定制所需要的圖片，還可以自由動態地給圖片更換風格。

此外，小程序canvas.drawImage()方法在真機上不能繪制網絡圖片。而Painter 可以解決這個問題，如果有繪制網絡圖片的需求也可以考慮使用Painter。

Painter其它優勢

painter可以下載網絡圖片到本地，并對下載到本地的網絡內容進行LRU管理。目前小程序允許的最大本地儲存為10m，我們默認painter可使用的本地存儲為6m，超出時會對本地存儲進行清理。如果需要自定義，可以在/painter/lib/downloader.js中修改MAX_SPACE_IN_B屬性。

目前子 view 的 css 屬性支持 object 或 array。允許將幾個view公用的css屬性提取出來。

由于palette 是以 js 承載的 json，所以你可以在每一個屬性中很方便的加上自己的邏輯。也可以把某些屬性單獨提取出來，讓多個 palette 共用，做到模塊化。

使用

demo下載

demo項目使用submodule的方式進行管理，因此在clone時需要運行

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive 復制代碼

clone完成后可以看到目錄。其中，/pages/example中存放的是使用示例，/components/painter就是我們所引入的功能組件。此外還有一個palette目錄，里面存放是我們所需要繪圖代碼。實際工作時，painter會調取card.js里的信息，在圖片上繪制出相應的圖形，就像一支畫筆在調色板上調制蘸取了顏料，然后在畫布上創作一樣。

將Painter引入到自己的項目

你可以直接將demo里的painter復制粘貼到自己的項目下，當然也可以更為優雅地運行一下這個代碼：

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter 復制代碼

它會將Painter工具放置在你當前的目錄下。我們推薦的做法是把它放在你的components下。

引入組件

像其它的組件一樣，在需要引入Painter的頁面.json文件中添加：

"usingComponents":{"painter":"/components/painter/painter" } 復制代碼

組件調用

在頁面的xml文件中調用painter組件，并傳入pallete規則的數據，以及繪制結束以后的回調。

<painter palette="{{data}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"/> 復制代碼

palette即是我們的調色板數據，以json形式根據一定規范創建，詳細信息請移步下文。

繪制回調

bind:imgOK="onImgOK" bind:imgErr="onImgErr" 復制代碼

數據傳入后，painter就會開始繪制，無論繪制成功或是失敗，都能在相應的回調方法里獲取相關的信息，如：

Pallette

說到底，Painter是一支畫筆工具，具體要讓這支畫筆畫什么東西，還得由我們，天資聰穎的程序猿們，來告訴它。告訴它應該畫什么，在哪里畫，畫的時候用什么姿勢……等等。這需要用一些別的手段，因為科學的實驗證明過，試圖用普通話這門語言跟它進行溝通，是不會有任何效果的。

調色板屬性

每一塊調色板都它自己的整體屬性，它一般規定了整個繪圖范圍的大小、樣式、背景等

它處于整個json文件的最外層，需要指定以下幾個屬性：

屬性解釋

background	背景，可以是顏色值，也可以是圖片鏈接，支持本地圖片鏈接和網絡圖片鏈接
width	寬度
height	高度
borderRadius	圓角
views	需要畫在圖上的其它元素，允許為空，但不允許省略

示例代碼：

{background: 'https://qhyxpicoss.kujiale.com/2018/06/12/LMPUSDAKAEBKKOASAAAAAAY8_981x600.png',width: '654rpx',height: '400rpx',borderRadius: '20rpx',views: []} 復制代碼

view屬性

畫完了調色板的整體屬性以后，就可以向views中增加一些元素了。元素支持四種類型，用type字段進行區分分類。不同種類的view又要求提供有不同的數據，如image元素需要提供它的url，text元素需要提供text文字內容：

typecontentdescription私有css屬性

image	url	圖片資源地址，本地或網絡
text	text	文本元素，書寫文字	fontSize:字體大小，color:文字顏色
rect	無	矩形	color:填充顏色
qrcode	content	畫二維碼	background:背景顏色，默認為透明

除了各view的私有屬性之外，view還有一些公共屬性可以設置：

屬性作用

left, top, right, bottom	元素的位置
rotate	旋轉角度，單位為360度的度
borderRadius	圓角，如果需要設置圖片為原形，請設置該屬性為寬或高的一半
align	元素在水平方向的對齊方式，與left配合使用，可設置為left, center, right，默認為left。

rotate

控制元素的旋轉，如下圖，將一行文字順時針旋轉了6度。

{type: 'text',text: '酷家樂 移動前端',css: {left: '20rpx',top: '50rpx',fontSize: '40rpx'}, }, 復制代碼

效果：

borderRadius

代碼(圓形)：

{type: 'image',url: this.cardInfo.avatar,css: {top: '48rpx',left: '448rpx',width: '192rpx',height: '192rpx',borderRadius:'96rpx',},}, 復制代碼

方角-->8rpx圓角-->圓形

align

這個屬性值比較有意思，它被用來設置元素在水平方向的、相對于位置設置的對齊方式。

什么意思呢？

比如說你設置了某元素的left為100rpx，并設置align屬性為left，那么該元素的左端就與100rpx對齊；若設置align為center，則該元素的中軸線與100rpx對齊。

在下面的例子中，三行文字的left都是230rpx，align分別為left, center, right。紅線是橫坐標為230rpx的軸線。

即，當設置了align屬性的時候，left值表達的是元素屬性中align的位置。

代碼：

{type: 'text',text: '酷家樂 移動前端',css: {left: '330rpx',top: '100rpx',fontSize: '40rpx',},},{type: 'text',text: '酷家樂 移動前端',css: {left: '330rpx',top: '200rpx',fontSize: '40rpx',align: 'center'},},{type: 'text',text: '酷家樂 移動前端',css: {left: '330rpx',top: '300rpx',fontSize: '40rpx',align: 'right'},}, 復制代碼

有了這個屬性，就可以設置元素的對齊形式，完成下面的布局要求了：

注意：align屬性請和left屬性配合使用，設置right值將造成錯誤。

align與rotate

當align屬性與rotate屬性同時存在時，元素的旋轉表現是以元素的中心點為中心的。

尺寸單位

目前 Painter 中支持兩種尺寸單位，px 和 rpx，代表的意思和小程序中一致。目前還沒有很好地支持百分比的使用。

保存圖片演示

獲得圖片的url后，可以設置一個點擊按鈕，點擊保存到本地

onImgOK(e) {this.imagePath = e.detail.path;},saveImage() {wx.saveImageToPhotosAlbum({filePath: this.imagePath,})}, 復制代碼

按鈕綁定saveImage方法，點擊進行保存：

生成朋友圈分享圖

最后，利用Painter工具可以生成不同樣式的朋友圈分享圖(下圖為微信小程序 酷咖名片 線上版部分截圖)

結語

painter是酷家樂前端在小程序的實際開發中自制的一套工具，目前在朋友圈分享、皮膚模板替換等方面都在使用，覺得用起來喜憂參半。開源出來大家分享。如果它能幫助到任何一個人，我們都非常開心；我們也非常歡迎并感謝提issure或pr，來告訴我們一些我們自己沒有能想到的東西，或者幫助解決Painter 中的大大小小的坑：

再一次傳送門：github.com/Kujiale-Mob…

轉載于:https://juejin.im/post/5b40b158e51d4518f543c7b0

總結

以上是生活随笔為你收集整理的微信小程序朋友圈分享图片生成方案实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。