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
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>
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. ------ -----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 |
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!