利用微信小程式中Canvas API來合成海報產生元件封裝-小程式開發-PHP中文網

利用微信小程式中Canvas API來合成海報產生元件封裝

php是最好的语言

發布： 2018-08-06 15:48:24

原創

4907 人瀏覽過

每個小程式成型後，一般都會選擇生成帶有菊花碼的海報分享出去來吸引更多的流量。以下來介紹下其他的一種實作方式吧

原理：主要利用微信小程式強大的Canvas API來合成，產生後可用wx.canvasToTempFilePath()匯出圖片位址，可實現預覽及儲存至手機相簿

一、如何使用

開啟專案資料夾

1	`1、 git` `clone` `https://github.com/WGinit/mini-poster.git`

登入後複製

2、在待使用頁面Json檔案中註冊該元件

{ “usingComponents“:
 
  { “share-image“: “/components/share_image/share_image“ }
 
}

登入後複製

3、在頁面中使用該元件

<share–image
 
     drawDataList=“{{dataList}}“>
 
</share–image>

登入後複製

二、參數配置

dataList: {
    canvasData:{
      type: &#39;image&#39;,
      url: &#39;&#39;,
      top: 0,
      left: 0,
      width: 750,
      height: 1334,
      comment: &#39;背景图&#39;,
      btnText: &#39;保存至相册&#39;
    },
    content: [{
      type: &#39;image&#39;,
      url: &#39;&#39;,
      top: 136,
      left: 100,
      shape: &#39;square&#39;,
      width: 290,
      height: 186,
      comment: &#39;头像&#39;
    }, {
      type: &#39;text&#39;,
      content: &#39;白山羊&#39;,
      top: 336,
      left: 100,
      fontSize: 40,
      lineHeight: 40,
      color: &#39;#f00&#39;,
      textAlign: &#39;left&#39;,
      weight: &#39;bold&#39;,
      maxWidth: 287
    }]
  }

登入後複製

三、參數說明

canvasData------------canvas相關參數設定

##說明typeStringimage是檔案類型，這裡是背景圖，預設imageurlString''是網路圖片位址topNumber0#No圖片的左上角在視覺區域上Y 軸的位置, 單位pxleftNumber#0#圖片的左上角在可視區域上X 軸的位置, 單位pxwidthNumber750否#畫布的寬度, 單位pxheightNumber1334否畫布的高度, 單位pxcommentString'背景圖'否btnText

content -------繪製內容參數

參數		預設值	必填






			##圖片描述
String	'儲存至相簿'	是	產生按鈕文字

##預設值必填說明typeString''#是繪製的類型，可選image和textshapeString'square'否繪製圖片的形狀, square 方形， circle 圓形#urlString''-圖片的網路位址，type為image必填contentString#top#leftwidth#height#commentfontSizelineHeight#文字行高, 單位pxcolor#String'#FFFFFF '#文字字體顏色textAlignString#'center'否文字水平對齊方式, 可選left, center, rightweightString'normal'

參數	#類型



	##''	-	文字內容， type為text必填
Number	0	否	圖片的左上角在目標畫布上Y 軸的位置, 單位px
NUmber	0	否	圖像的左上角在目標畫布上X 軸的位置, 單位px
Number	100	否	繪製圖片的寬度,單位px
#Number	100	否	繪製圖片的高度, 單位px
String	' '	否	繪製圖片的說明
Number	32	否	文字字型大小,單位px
Number	32