uniapp开发微信小程序使用painter生成海报

最初绘制海报时是准备用canvas绘制，但是绘制遇到各种问题，且难度颇高，最后也没能绘制出来，也尝试过使用微信官方的 wxml-to-canvas，但需要传入wxml和样式，太为难我这个小小的后端开发者了，最终找到了painter生成海报的方案

1.引入painter代码

这里我通过手动下载下来的代码

components/painter · master · mirrors / shesw / Painter · GitCode小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 🚀 Github 镜像仓库 🚀 源项目地址 ⬇https://codechina.csdn.net/mirrors/shesw/Painter/-/tree/master/components/painter

将代码下载后，在项目根目录中创建新的文件夹wxcomponents，将下载下来的代码放入其中

 2.在需要绘图的页面引入painter

在pages.json中引入painter插件

 同时也需要在页面中引入

3.获取painter模板

这里我是使用React App来可视化编辑模板的

React Apphttps://lingxiaoyi.github.io/painter-custom-poster/编辑模板后，点击复制代码，将代码复制到js文件中，这里我复制到cardData.js

 这里我做了对复制下来的文件做了一些修改，将一些文字替换成了变量

4.绘制海报

页面中引入我们刚刚修改的cardData.js

做一个基本的展示页面

<view class="content-img" @click="saveImage">
            <image :src="imagePath" @tap="previewClick" class="img-preview" mode="widthFix"></image>
        </view>
        <view class="canvas-box">
            <painter :palette="template" widthPixels="1000" @imgOK="onImgOK" @imgErr="imgErr" />
        </view>

从方法中获取js中的值，并且填充需要展示的参数，赋值完成后会自动绘制

// 绘制代码获取
            initData() {
                uni.showLoading({
                    title: "拼命生成中...",
                    mask: true,
                });
                // 设置要展示的参数
                let cardData={
                    name:"李某",
                    provinceName:"黑龙江省",
                    cityName:"齐齐哈尔市",
                    workyears:"5",
                    personalPosition:"销售1",
                    company:"最强公司",
                    phone:"xxxxxxxx",
                    mobile:"xxxxxxxx",
                    wechat:"xxxxxxxx",
                    introduction:'',
                    professionalIdea:'',
                    personalPosition:'',
                    labels:'',
                    
                    
                    avatarUrl:"https://thirdwx.qlogo.cn/mmopen",//微信用户头像
                    codeUrl:"https://thirdwx.qlogo.cn/mmopen/",//二维码图像
                    
                }
                this.template = new card().palette(cardData)
            },

在 mounted中进行调用

mounted() {
            
            this.initData()
            
        }, 

在绘制完成后，会返回图像路径，将图像路径存储，便于下载

// 合成成功后将图片地址传入image，进行显示
            onImgOK(e) {
                this.imagePath = e.detail.path;
                uni.hideLoading();
            },
            // 错误返回
            imgErr(e) {
                uni.hideLoading();
                uni.showModal({
                    title: '提示',
                    content: "生成海报失败",
                    showCancel: false,
                })
            }

 下载图片到相册的方法

// 下载图片到相册
            saveImage() { 
                var _this = this;
                uni.authorize({
                    scope: "scope.writePhotosAlbum",
                    success() {
                        uni.saveImageToPhotosAlbum({
                            filePath: _this.imagePath,
                            success() {
                                uni.showModal({
                                    title: "保存成功",
                                    content: "图片已成功保存到相册，快去分享吧",
                                    showCancel: false
                                })
                            }
                        });
                    }
                })
            
            },

 最后生成的海报是这样的，二维码我使用的头像的资源文件，所以看起来有点怪

用这种方法引入的painter插件有一些配置属性无法使用，例如textAlign，borderRadius等