前言

这几天接到一个需求，要在公众号内生成分享海报。之前有做过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相当于直接就是数据了，试了一下果然可以，问题也解决了。