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