小程序使用painter生成图片

1. 在git网站上下载代码 将components文件夹下的painter复制到小程序 新建component 文件夹下

2. 在需要生成图片的页面json文件里引用

  "usingComponents": {   
      "painter":"../../components/painter/painter"
    }

3. 在wxml中建画布

<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />

4. 在js种写样式和dom

  getDraw() {
        this.setData({
            template: {
            background: '#fff',
            borderRadius: '12px',
            width: this.data.width + 'px',
            height: this.data.height + 'px',
            views: [{
                    type: 'text',
                    text: this.data.startName,
                    css: {
                        top: '50px',
                        left: '50px',
                        fontSize: '32px',
                        fontWeight: 'bold',
                        color: "#2B3245",
                        display: "block",
                        width: "247px",
                        overflow: "hidden",
                        whiteSpace: "nowrap",
                        textOverflow:"ellipsis",
                        maxLines: 1
                    },
                },
                {
                    type: 'image',
                    url: "https://test-static-public-log56-com.oss-cn-hangzhou.aliyuncs.com/Tco_static/img/dz_luxian_jiantou.png",
                    css: {
                        top: '45px',
                        left: '296px',
                        width: '46px',
                        height: '46px',
                        mode: "aspectFill"
                    },
                },
                {
                    type: 'text',
                    text: this.data.endName,
                    css: {
                        top: '50px',
                        right: '50px',
                        fontSize: '32px',
                        fontWeight: 'bold',
                        color: "#2B3245",
                        display: "block",
                        width: "247px",
                        overflow: "hidden",
                        whiteSpace: "nowrap",
                        textOverflow:"ellipsis",
                        maxLines: 1,
                    },
                },
                {
                    type: 'rect',
                    css: {
                        top: '116px',
                        left: '50px',
                        width: "540px",
                        height: "144px",
                        color: "linear-gradient(221deg, #1F70FE 0%, #5CC1FD 100%)",
                        borderRadius: "16px"
                    },
                },
                {
                    type: 'text',
                    text: '货物信息：' + this.data.endName,
                    css: {
                        top: '138px',
                        left: '68px',
                        fontSize: '28px',
                        color: "#fff",
                        display: "block",
                        width: "500px",
                        overflow: "hidden",
                        whiteSpace: "nowrap",
                        textOverflow:"ellipsis",
                        maxLines: 1,
                    },
                },
                {
                    type: 'text',
                    text: '车队名称：' + this.data.endName,
                    css: {
                        top: '182px',
                        left: '68px',
                        fontSize: '28px',
                        color: "#fff",
                        width: "500px",
                        display: "block",
                        overflow: "hidden",
                        whiteSpace: "nowrap",
                        textOverflow:"ellipsis",
                        maxLines: 1,
                    },
                },
                {
                    type: 'rect',
                    css: {
                        top: '240px',
                        left: '50px',
                        width: "540px",
                        height: "372px",
                        background: "#F4F5F8",
                        borderRadius: "6px",
                        borderRadius: '10px',
                        color: '#F4F5F8',
                    },
                }, 
                {
                    type: 'image',
                    url: "https://test-static-public-log56-com.oss-cn-hangzhou.aliyuncs.com/Tco_static/img/gh_8ba8ddec9d29_860.jpg",
                    css: {
                        top: '286px',
                        left: '182px',
                        width: '276px',
                        height: '276px'
                    },
                }, 
                {
                    type: 'text',
                    text: '长按识别或分享',
                    css: {
                        bottom: '50px',
                        left: '300px',
                        fontSize: '24px',
                        color: "#333",
                        align: 'center',
                        maxLines: 1,//限制行数
                    },
                }, 
            ],
            }
        })
    },
    // 生成成功
    canvasSuc(e) {
        console.log(e)
        wx.hideLoading()
        this.setData({
            image: e.detail.path
        })
    },

5.data内用到的动态数据

    data: {
        template: {},
        images: "",
        width: 640,
        height: 720,
        startName: '我是测试哈哈哈测试测试嗷嗷嗷水水水水水水水水水水吖',
        endName: '煤矿煤矿裴总的矿矿酷酷酷酷酷酷酷酷酷酷酷酷酷酷酷',
        show: false,
        goodsInfo: '煤炭矿产-石灰石',
        carTeamName: '小梦测试',
    },