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

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

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

一、如何使用

開啟專案資料夾

   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: 'image',
      url: '',
      top: 0,
      left: 0,
      width: 750,
      height: 1334,
      comment: '背景图',
      btnText: '保存至相册'
    },
    content: [{
      type: 'image',
      url: '',
      top: 136,
      left: 100,
      shape: 'square',
      width: 290,
      height: 186,
      comment: '头像'
    }, {
      type: 'text',
      content: '白山羊',
      top: 336,
      left: 100,
      fontSize: 40,
      lineHeight: 40,
      color: '#f00',
      textAlign: 'left',
      weight: 'bold',
      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

##文字字體粗細

maxWidth

Number600

否文字限制的最大寬度，單位px

############四、備註######上述單位都是參考設計稿（750 * 1334）而來，實際情況可直接依設計稿上尺寸配置參數.######相關文章：#########js與canvas合成圖片做出微信公眾號海報功能############微信小程式的多檔案下載封裝使用######

以上是利用微信小程式中Canvas API來合成海報產生元件封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！