微信公众号生成海报（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相当于直接就是数据了，试了一下果然可以，问题也解决了。

巴特西

微信公众号生成海报（uniapp）

前言

效果图

代码实现

坑

最新文章

热门文章