Verwenden Sie die Canvas-API im WeChat-Applet, um das Komponentenpaket für die Postergenerierung zu synthetisieren

Nachdem jedes Miniprogramm erstellt wurde, wird normalerweise beschlossen, ein Poster mit einem Gänseblümchencode zu erstellen und es zu teilen, um mehr Verkehr anzulocken. Lassen Sie uns eine weitere Implementierungsmethode vorstellen

Prinzip: Verwenden Sie zum Synthetisieren hauptsächlich die leistungsstarke Canvas-API des WeChat-Applets. Nach der Generierung können Sie wx.canvasToTempFilePath() verwenden, um die Bildadresse zu exportieren, damit Sie sie in der Vorschau anzeigen und speichern können zum mobilen Fotoalbum

1. So verwenden Sie

Öffnen Sie den Projektordner

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

Registrieren Sie die Komponente in der Json-Datei der zu verwendenden Seite

{ “usingComponents“:

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

}

3. Verwenden Sie diese Komponente auf der Seite

  <share–image

       drawDataList=“{{dataList}}“>

  </share–image>

2. Parameterkonfiguration

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
    }]
  }

3. Parameterbeschreibung

canvasData--------- ---canvasbezogene Parameterkonfiguration

参数	类型	默认值	必填	说明
type	String	image	是	文件类型， 这里为背景图，默认image
url	String	''	是	网络图片地址
top	Number	0	否	图像的左上角在可视区域上 Y 轴的位置, 单位px
left	Number	0	否	图像的左上角在可视区域上 X 轴的位置, 单位px
width	Number	750	否	画布的宽度, 单位px
height	Number	1334	否	画布的高度, 单位px
comment	String	'背景图'	否	图片描述
btnText	String	'保存至相册'	是	生成按钮文字

Inhalt -------Zeichnungsinhaltsparameter

参数	类型	默认值	必填	说明
type	String	''	是	绘制的类型，可选image和text
shape	String	'square'	否	绘制图片的形状, square 方形， circle 圆形
url	String	''	-	图片的网络地址， type为image必填
content	String	''	-	文本内容， type为text必填
top	Number	0	否	图像的左上角在目标画布上 Y 轴的位置, 单位px
left	NUmber	0	否	图像的左上角在目标画布上 X 轴的位置, 单位px
width	Number	100	否	绘制图片的宽度,单位px
height	Number	100	否	绘制图片的高度, 单位px
comment	String	''	否	绘制图片的说明
fontSize	Number	32	否	文本字体大小,单位px
lineHeight	Number	32	否	文本行高, 单位px
color	String	'#FFFFFF '	否	文本字体颜色
textAlign	String	'center'	否	文本水平对齐方式, 可选left, center, right
weight	String	'normal'	否	文本字体粗细
maxWidth	Number	600	否	文本限制的最大宽度，单位px

4. Anmerkungen

Die oben genannten Einheiten basieren auf dem Entwurfsentwurf (750 * 1334). kann variieren. Konfigurieren Sie die Parameter direkt entsprechend der Größe im Designentwurf.

Verwandte Artikel:

JS- und Canvas-Synthese von Bildern zur Erstellung von WeChat-Postern für öffentliche Accounts

Verwendung eines Multidatei-Downloadpakets für das WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonVerwenden Sie die Canvas-API im WeChat-Applet, um das Komponentenpaket für die Postergenerierung zu synthetisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!