友達の輪を共有する WeChat アプレットがポスターを生成する

WeChat アプレットにより、Moments への共有が可能になります

Moments での共有 現在では、Canvas を通じて画像を生成し、保存して、自分で Moments に転送するのが一般的な方法です。最近のプロジェクトにこの要件があったので、記録しました。

ポスターの QR コードをスキャンした後、指定したページに直接ジャンプしたい場合は、まずパラメーターを含む QR コードを生成する必要があります:

1. まず。 Index.json 内にコード

index.wxml コード:

<view class="container">
    <image src="{{shareImage}}" class="share-image"></image>
    <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/>
    <button bind:tap="eventDraw">绘制</button>
    <button bind:tap="eventSave">保存到本地</button>
</view>

index.wxss コード:

.share-image {
    width: 600rpx;
    height: 810rpx;  
    margin: 0 75rpx;  
    padding: 1px;  
    margin-top: 40px;
}
button {
    margin-top: 100rpx;
}

index.js コード:

Page({
    data: {
        painting: {},
        shareImage: '',
    },
    onLoad() {
        this.eventDraw()
    },
    eventDraw() {
        var that = this;
        wx.showLoading({
            title: '绘制分享图片中',
            mask: true
        })
        this.setData({
            painting: {
                width: 375,
                height: 568,
                clear: true,
                views: [
                  //这个是一个纯白的图片,给整个画布一个白背景,要不然会有马赛克
                  {
                    type: 'image',
                    url: 'https://XXX.com/weixin/item/bai.jpg',
                    width: 375,
                    height: 568
                  },
                  //边框,直接拿了一张图,当做边框
                  {
                    type: 'image',
                    url: 'https://XXXXX.com/weixin/item/biankuang.png',
                    width: 375,
                    height: 568
                  },
                  //商品图
                  {
                    type: 'image',
                    url: 'https://XXX.com/seafood/public78fffad452d2e158636b.jpg',
                    width: 328,
                    height: 328,
                    top:20,
                    left:22,
                  },
                  //商品名称
                  {
                    type: 'text',
                    content: '产品名称产品11111',
                    fontSize: 20,
                    lineHeight: 21,
                    color: '#000000',
                    textAlign: 'left',
                    top: 360,
                    left: 36,
                    width: 290,
                    MaxLineNumber: 2,
                    breakWord: true,
                    bolder: true
                  },
                  //线条,同样也是用的图
                  {
                    type: 'image',
                    url: 'https://XXXX.com/weixin/item/xiantiao.png',
                    width: 325,
                    height: 5,
                    top: 443,
                    left:22
                  },
                  //商品价格
                  {
                      type: 'text',
                      content: '￥198.00',
                      fontSize: 20,
                      color: '#E62004',
                      textAlign: 'left',
                      top: 414,
                      left: 36,
                      bolder: true
                  },
                  //名称
                  {
                    type: 'text',
                    content: '名称名称',
                    fontSize: 15,
                    lineHeight: 21,
                    color: '#7E7E8B',
                    textAlign: 'left',
                    top: 414,
                    left: 267,
                    width: 70,
                    MaxLineNumber: 1,
                    breakWord: true,
                  },
                  // 文字, 打不出这个文字带阴影的效果, 所以也用的图
                  {
                    type: 'image',
                    url: 'https://XXXX.com/weixin/item/wenzi.png',
                    width: 145,
                    height: 75,
                    top: 460,
                    left: 36,
                  },
                  //二维码
                  {
                    type: 'image',
                    url: 'https://XXXX.com/Public/Home/images/banner/min_code.jpg',
                    top: 455,
                    left: 260,
                    width: 85,
                    height: 85
                  },
                ]
            }
        })
    },
    eventSave() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.shareImage,
            success(res) {
                wx.showToast({
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        })
    },
    eventGetImage(event) {
        console.log(event)
        wx.hideLoading()
        const {
            tempFilePath,
            errMsg
        } = event.detail
        if (errMsg === 'canvasdrawer:ok') {
            this.setData({
                shareImage: tempFilePath
            })
        }
    }
})

コードを記述します。

りー

コンポーネントのダウンロード アドレス:

{
  "navigationBarTitleText": "生成海报",
  "usingComponents": {
    //在使用页面注册组件(下面有下载地址,如果放的路径不一样,自行就修改为你的路径就行)
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer" 
  }
}

2. オブジェクト構造

1. データ オブジェクトの最初のレイヤーには、幅、高さ、ビューの 3 つのパラメーターが必要です。構成内のすべての数値には単位がありません。これは、キャンバスが比例的なイメージを描画することを意味します。特定の表示サイズを決定するには、返された画像パスを画像タグに配置するだけです。

2. 現在、描画できる構成はイメージ、テキスト、四角形の 3 種類です。設定する属性は基本的にcssのキャメルケース名を使用しており、比較的分かりやすいです。画像 画像アドレスは、/images/1.jpeg などのローカル画像にすることができます。

left

アートボードの左上隅から上端までの距離 ボードの左側までの距離

身長

幅

描画する幅

0

どのくらいの高さで描くか

0

text(テキスト)

テキストの配置左中央、左、右lineHeight行の高さ、複数行のテキストでのみ使用可能20topテキストの左上隅とアートボードの上部の間の距離0leftテキストの左上隅とアートボードの左側の間の距離0breakWord改行が必要かどうかfalsetru​​e、false MaxLineNumber最大行数、 Set BreakWord: true のみ、現在の属性は有効で、行数を超えるコンテンツは...2 MaxLineNumber 属性と組み合わせて使用​​されます。width は改行に達する幅です0

プロパティ	意味	デフォルト値	オプションの値
	テキストを描画します	デフォルトでは空です
カラー	カラー	ブラック
fontSize	フォントサイズ	16
textAlign
width

bolder太字にするかどうか偽 true、falsetextDecoration下線と下線効果を表示なし下線、ラインスルー（下線）

rect (長方形、線)

プロパティ	意味	デフォルト値	オプションの値
背景	背景色	黒
top	左上隅とアートボードの上端との間の距離
left	左上隅とアートボードの左側との間の距離
幅	どれくらいの幅を描くか	0
高さ	どのくらいの高さで描くべきか	0

この方法はとてもシンプルで簡単です理解し、お互いから学ぶことができます。

以上が友達の輪を共有する WeChat アプレットがポスターを生成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。