WeChat アプレットの Canvas API を使用してポスター生成コンポーネント パッケージを合成する

各ミニプログラムが形成された後、通常は、より多くのトラフィックを引き付けるために、菊のコードを含むポスターを生成し、それを共有することが選択されます。別の実装方法を紹介しましょう

原理: 主に WeChat アプレットの強力な Canvas API を使用して合成します。生成後、wx.canvasToTempFilePath() を使用して画像アドレスをエクスポートし、プレビューして保存できます。携帯電話アルバム

1.

を使ってプロジェクトフォルダーを開く方法

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

2. 利用するページのJsonファイルにコンポーネントを登録

{ “usingComponents“:

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

}

3. ページ内のコンポーネントを利用する

  <share–image

       drawDataList=“{{dataList}}“>

  </share–image>

2パラメータ設定

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. パラメータの説明

canvasData---------------canvas関連のパラメータ設定

です

パラメータ	タイプ	デフォルト値	必須	説明
type	String	image	は	ファイルタイプです。これが背景画像、デフォルト画像です
url	String	''	は	ネットワークイメージアドレス
top	Number	0	No	視覚領域の Y 軸上の画像の左上隅の位置、単位 px
left	Number	0	いいえ	ビジュアルエリアのX軸上の画像の左上隅の位置、単位px
幅	数値	750	いいえ	キャンバスの幅、単位px
高さ	数値	1334	いいえ	キャンバスの高さ（ピクセル単位）
コメント	文字列	「背景画像」	いいえ	画像の説明
btnテキスト	文字列	「アルバムに保存」	はい	ボタンテキストを生成します

content -------描画コンテンツパラメータ

StringNumberNUmberNumberNumberコメント文字列''いいえ絵を描くための手順フォントサイズ数値32 Noテキストのフォントサイズ、単位pxlineHeightNumber32Noテキストの行の高さ、単位pxcolorString'#FFFFFF ' いいえ文字のフォントの色textAlignString'center' IV. 備考上記の単位はデザインに基づいています実際には、デザイン案のサイズに合わせてパラメータを直接設定できます 関連記事:

パラメータ	タイプ	デフォルト値	必須	説明
タイプ	文字列	」	はい	図面の種類、オプションの画像、テキスト
Shape	String -	写真のネットワークアドレス、タイプは画像必須です		content
''	-	テキストコンテンツ、タイプはテキスト必須です		top
0	No	ターゲットキャンバス上のY軸上の画像の左上隅の位置、単位はpx		left
0	No	対象キャンバス上のX軸上の画像、単位はpx		width
100	No	描かれた絵の幅、単位はpx		height
100	いいえ	描かれた絵の高さ（ピクセル単位）
No 600	No	テキスト制限の最大幅、単位px
		画像を合成してWeChat公開アカウントのポスターを作成		Multi - WeChat アプレットのファイル ダウンロードのカプセル化

以上がWeChat アプレットの Canvas API を使用してポスター生成コンポーネント パッケージを合成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。