Utilisez l'API Canvas dans l'applet WeChat pour synthétiser le package de composants de génération d'affiches

Après la création de chaque mini-programme, il est généralement choisi de générer une affiche avec un code marguerite et de la partager pour attirer plus de trafic. Introduisons une autre méthode d'implémentation

Principe : utilisez principalement la puissante API Canvas de l'applet WeChat pour synthétiser. Après la génération, vous pouvez utiliser wx.canvasToTempFilePath() pour exporter l'adresse de l'image, afin de pouvoir la prévisualiser et la sauvegarder. vers l'album photo mobile

1. Comment utiliser

pour ouvrir le dossier du projet

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

2. Enregistrez le composant dans le fichier Json de la page à utiliser

{ “usingComponents“:

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

}

3. Utilisez ce composant dans la page

  <share–image

       drawDataList=“{{dataList}}“>

  </share–image>

2 Configuration des paramètres

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. Description du paramètre

canvasData. ------ -----configuration des paramètres liés au canevas

参数	类型	默认值	必填	说明
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	'保存至相册'	是	生成按钮文字

contenu -------Paramètres de contenu du dessin

参数	类型	默认值	必填	说明
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. Remarques

Les unités ci-dessus sont basées sur le projet de conception (750 * 1334). peut varier Configurez les paramètres directement en fonction de la taille sur le brouillon de conception.

Articles connexes :

JS et synthèse d'images sur toile pour créer des affiches de compte public WeChat

Utilisation du package de téléchargement multi-fichiers pour le mini-programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!