微信公眾號生成海報（uniapp）

前言

這幾天接到一個需求，要在公眾號內生成分享海報。之前有做過H5和小程序的，心想直接復制過來就行了。沒想到踩了不少的坑，搞了好幾天終於搞好了，特此分享一下，希望能對大家有所幫助。

效果圖

代碼實現

    <u-mask :show="showPoster" @click="showPoster = false" :custom-style="{background: 'rgba(0, 0, 0, 0.8)'}">
            <view class="poster-canvas">
                    <canvas canvas-id="canvasId"
                            :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
            </view>
            <view class="poster-img-box">
                    <image class="poster-img" :src="posterUrl" show-menu-by-longpress></image>
            </view>
            <view class="poster-footer">
                    長按圖片保存
            </view>
    </u-mask>

import {
        getSharePoster
} from '@/components/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';

data() {
        return {
                showPoster: false,
                posterUrl: "",
                posterCodeUrl: "",
                avatarUrl: "",
                bgUrl: "",
                poster: {},
        }
},

async createPoster() {
        let _this = this;

        const d = await getSharePoster({ //return Promise
                _this: _this, //若在組件中使用 必傳
                posterCanvasId: 'canvasId', //canvasId
                canvasType: '2d',
                type: 'testShareType',
                backgroundImage: `data:image/png;base64,${this.info.background_url2}`, //背景圖片路徑, 畫布會跟隨圖片的實際像素, 並繪制為背景, 請不要使背景圖片的像素太大
                setCanvasWH({
                        bgObj
                }) {
                        bgObj.width = 245
                        bgObj.height = 435
                        _this.poster = bgObj
                },
                drawArray({ //繪制序列
                        bgObj, //背景圖對象
                        type, //自定義標識
                        bgScale, //背景縮放
                        setBgObj, //動態設置畫布(寬高),若使用該方法不建議背景圖方式繪制, 建議使用background自定義畫布繪制, 因為這個方法繪制修改背景圖的寬高
                        getBgObj //獲取動態設置的畫布寬高
                }) {
                        //return new Promise((rs, rj)=>{ rs([Obejct, ...]) })
                        //或者
                        //return [Obejct, ...]
                        const elementArray = [{
                                type: 'image',
                                id: 'code',
                                url: `data:image/png;base64,${_this.posterCodeUrl}`,
                                dx: 170,
                                dy: 350,
                                dWidth: 60,
                                dHeight: 60,
                                serialNum: 0,
                        }]
                        if (_this.info.background_if_avatar) {
                                elementArray.push({
                                        type: 'image',
                                        id: 'avatar',
                                        url: `data:image/png;base64,${_this.info.image2}`,
                                        dx: 20,
                                        dy: 355,
                                        dWidth: 32,
                                        dHeight: 32,
                                        serialNum: 0,
                                        circleSet: {
                                                r: 16
                                        }
                                }, )
                        }
                        if (_this.info.background_if_nickname) {
                                elementArray.push({
                                        type: 'text',
                                        id: 'nickname',
                                        text: _this.nickName,
                                        color: '#fff',
                                        dx: 20,
                                        dy: 400,
                                        serialNum: 1,
                                })
                        }
                        return elementArray
                },
        })
        uni.hideLoading()
        this.showPoster = true
        this.posterUrl = d.poster.tempFilePath
},

以上是具體實現的主要代碼，這里選用了QS-SharePoster插件，開始時我是想用uniapp的原生canvas-API進行開發的，可是總是有各種各樣的問題，搞了一天不得已只能放棄。

坑

請注意在公眾號內圖片一定要用base64格式的！在使用uniapp並且公眾號內生成海報是需要使用到圖片下載API的，這個API總是會莫名其妙的失敗，找不到任何的原因。小程序端以及H5都是完全正常的。嘗試了好幾天無果后，突然想到是不是可以采用base64格式的圖片是不是沒有限制呢？畢竟base64相當於直接就是數據了，試了一下果然可以，問題也解決了。