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

php是最好的语言
Libérer: 2018-08-06 15:48:24
original
4755 Les gens l'ont consulté

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
Copier après la connexion

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

{ “usingComponents“:

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

}
Copier après la connexion

3. Utilisez ce composant dans la page

  <share–image

       drawDataList=“{{dataList}}“>

  </share–image>
Copier après la connexion

2 Configuration des paramètres

dataList: {
    canvasData:{
      type: &#39;image&#39;,
      url: &#39;&#39;,
      top: 0,
      left: 0,
      width: 750,
      height: 1334,
      comment: &#39;背景图&#39;,
      btnText: &#39;保存至相册&#39;
    },
    content: [{
      type: &#39;image&#39;,
      url: &#39;&#39;,
      top: 136,
      left: 100,
      shape: &#39;square&#39;,
      width: 290,
      height: 186,
      comment: &#39;头像&#39;
    }, {
      type: &#39;text&#39;,
      content: &#39;白山羊&#39;,
      top: 336,
      left: 100,
      fontSize: 40,
      lineHeight: 40,
      color: &#39;#f00&#39;,
      textAlign: &#39;left&#39;,
      weight: &#39;bold&#39;,
      maxWidth: 287
    }]
  }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!