這篇文章主要介紹怎么利用微信小程序中Canvas API來(lái)合成海報(bào)生成組件封裝，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司是專業(yè)的市中網(wǎng)站建設(shè)公司，市中接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行市中網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

原理：主要利用微信小程序強(qiáng)大的Canvas API來(lái)合成，生成后可用wx.canvasToTempFilePath()導(dǎo)出圖片地址，從而可實(shí)現(xiàn)預(yù)覽及保存至手機(jī)相冊(cè)

一、如何使用

打開項(xiàng)目文件夾

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

2、在待使用頁(yè)面Json文件中注冊(cè)該組件

{ “usingComponents“:

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

}

3、在頁(yè)面中使用該組件

二、參數(shù)配置

dataList: {
    canvasData:{
      type: 'image',
      url: '',
      top: 0,
      left: 0,
      width: 750,
      height: 1334,
      comment: '背景圖',
      btnText: '保存至相冊(cè)'
    },
    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
    }]
  }

三、參數(shù)說(shuō)明

canvasData------------canvas相關(guān)參數(shù)配置

參數(shù)	類型	默認(rèn)值	必填	說(shuō)明
type	String	image	是	文件類型， 這里為背景圖，默認(rèn)image
url	String	''	是	網(wǎng)絡(luò)圖片地址
top	Number	0	否	圖像的左上角在可視區(qū)域上 Y 軸的位置, 單位px
left	Number	0	否	圖像的左上角在可視區(qū)域上 X 軸的位置, 單位px
width	Number	750	否	畫布的寬度, 單位px
height	Number	1334	否	畫布的高度, 單位px
comment	String	'背景圖'	否	圖片描述
btnText	String	'保存至相冊(cè)'	是	生成按鈕文字

content -------繪制內(nèi)容參數(shù)

參數(shù)	類型	默認(rèn)值	必填	說(shuō)明
type	String	''	是	繪制的類型，可選image和text
shape	String	'square'	否	繪制圖片的形狀, square 方形， circle 圓形
url	String	''	-	圖片的網(wǎng)絡(luò)地址， type為image必填
content	String	''	-	文本內(nèi)容， type為text必填
top	Number	0	否	圖像的左上角在目標(biāo)畫布上 Y 軸的位置, 單位px
left	NUmber	0	否	圖像的左上角在目標(biāo)畫布上 X 軸的位置, 單位px
width	Number	100	否	繪制圖片的寬度,單位px
height	Number	100	否	繪制圖片的高度, 單位px
comment	String	''	否	繪制圖片的說(shuō)明
fontSize	Number	32	否	文本字體大小,單位px
lineHeight	Number	32	否	文本行高, 單位px
color	String	'#FFFFFF '	否	文本字體顏色
textAlign	String	'center'	否	文本水平對(duì)齊方式, 可選left, center, right
weight	String	'normal'	否	文本字體粗細(xì)
maxWidth	Number	600	否	文本限制的較大寬度，單位px

四、備注

上述單位都是參照設(shè)計(jì)稿（750 * 1334）而來(lái)，實(shí)際情況可直接按設(shè)計(jì)稿上尺寸配置參數(shù).

以上是“怎么利用微信小程序中Canvas API來(lái)合成海報(bào)生成組件封裝”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：怎么利用微信小程序中CanvasAPI來(lái)合成海報(bào)生成組件封裝-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/hhhgs.html