小程序 使用painter 写海报

下载painter
git 地址
components/painter 下载放在本地单独创建一个文件夹

1662557366380.jpg

<view class="box">
    <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />
    <image mode="widthFix" src="{{image}}" bindtap="previewImg" />
      // 写自己的底部样式
    <view class="save" hover-class="hoverClick" bindtap="getSave">保存图片</view>
</view>

下载一定要先调用 getImageInfo 要不然下载不下来，这是我本人踩得坑 一定要先调用 getImageInfo 一定要先调用 getImageInfo 重要的事情说三遍

 data: {
        Draw: false,
        template: {},
        image: "",
        show: false,
        width: 750,
        height: 1060,
        userInfo: '',
        shaareText: false,
    },

    /**
     * 组件的方法列表
     */
    methods: {
        canvasClick() {
            this.setData({
                canvasSwith: true
            })
            this.getDraw()
        },

    
        onClickHide() {
            this.setData({ canvasSwith: false, image: '', shaareText: false });
        },
        getDraw() {
            wx.showLoading({
                title: '正在努力生成中',
            })
            this.setData({
                template: {
                    background: '#fff',
                    width: this.data.width + 'px',
                    height: this.data.height + 'px',
                    views: [
                        {
                            type: 'image',
                            url: this.data.userInfo.inviteBannerUrl,
                            css: {
                                top: '0px',
                                left: '0px',
                                width: "100%",
                                heigth: '400px',
                                borderRadius: '12px'
                            },
                        },
                        {
                            type: 'image',
                            url: this.data.userInfo.avatar.replace('http://thirdwx.qlogo.cn', 'https://wx.qlogo.cn'),
                            css: {
                                top: '700px',
                                left: '24px',
                                width: '70px',
                                height: '70px',
                                borderRadius: '35px'
                            },
                        },
                        {
                            type: 'text',
                            text: this.data.userInfo.nickName,
                            css: {
                                top: '715px',
                                left: '120px',
                                fontSize: '28px',
                                fontWeight: 400,
                                color: '#858B9C',
                            },
                        },
                        {
                            type: 'text',
                            text: "为你推荐“汽车保养分享赚钱”",
                            css: {
                                top: '785px',
                                left: '24px',
                                fontSize: '30px',
                                fontWeight: 500,
                                color: '#111A34',
                            },
                        },
                        {
                            type: 'image',
                            url: '../../images/mine/直线 3@2x (1).png',
                            css: {
                                top: '870px',
                                left: '0',
                                width: '750px',
                                height: '4px',
                            },

                        },
                        {
                            type: 'text',
                            text: "长按识别",
                            css: {
                                top: '920px',
                                left: '24px',
                                fontSize: '28px',
                                fontWeight: 400,
                                color: '#858B9C',
                            },
                        },
                        {
                            type: 'text',
                            text: "xxx",
                            css: {
                                top: '975px',
                                left: '24px',
                                fontSize: '30px',
                                fontWeight: 500,
                                color: '#111A34',
                            },
                        },
                        {
                            type: 'image',
                            url: this.data.userInfo.inviteWxUrl,
                            css: {
                                top: '900px',
                                left: '80%',
                                width: '120px',
                                height: '120px',
                                borderRadius: '50%'
                            },
                        },
                    ],
                }
            })
        },
        // 生成成功
        canvasSuc(e: any) {
            console.log(e, '--------------------------')
            wx.hideLoading()
            this.setData({
                image: e.detail.path,
                shaareText: true,
            })
        },

        getSave() {
            wx.getImageInfo({
                src: this.data.image,
                success: function (res) {
                    var path = res.path;
                    wx.getSetting({
                        success: (set) => {
                            wx.saveImageToPhotosAlbum({
                                filePath: path,
                                success: (res) => {
                                    if (res.errMsg == "saveImageToPhotosAlbum:ok") {
                                        wx.showToast({
                                            title: '保存成功',
                                        });
                                    }
                                }
                            })
                            if (set.authSetting['scope.writePhotosAlbum'] == false) {
                                wx.openSetting()
                            }
                        }
                    })
                }
            })
        },