前段时间遇到个需求 需要根据不同情况生成不同图片，本着能cv就cv,有轮子用轮子的底线，开始花大精力在各大平台努力查询相关素材

绝不是不会canvas

终于功夫不负有心人，找到了这个- painter

期间也踩了一些坑，但是还是值得一用的

一、根据文档来，第一步引用插件

painter (opens new window)

二、初始化插件

---

    import Card1 from '../../palette/savePage1.js' // canvas.js

    ...

    <!-- onLoad() -->
    const t = this
    this.setData({ // canvas图片初始化
      paintPallette: new Card1().palette({
        "src": t.data.src, // 图片地址
        "user_name": wx.getStorageSync('user').nickName || '未授权', // 姓名
        "age": '0',
      }),
    });

    <!-- savePage1.js -->
    palette(data) { // 通过 data 传值
        return ({
            width: '750rpx',
            height: `1500rpx`,
            views: [
                {
                    id: 'bg_img',
                    type: 'image',
                    url: `${data.src}`,
                    css: {
                        width: '100%',
                        height: 'auto',
                        left: '0',
                        top: '0',
                    },
                },
                {
                    id: 'bg_img',
                    type: 'text',
                    text: `${data.user_name}`,
                    css: {
                        width: '100%',
                        height: 'auto',
                        top: 'calc(bg_img.top + 300rpx)', // 根据某个id值 来定位，确实好用
                        textAlign: 'center',
                    },
                },
            ]
        })
    }

至此初始化完成， 一定要配置微信安全域名， 不然生成图片时会报错， 后续就可以通过点击事件或者 某个特殊时间段 重新传参通过插件imgOK返回拿到本地生成的图片地址就行

三、小用法

意外情况

某些机型当你对它相对定位，请慎用text.width，

    {
        id: 'text8',
        type: 'text',
        text: `${data.xxx}`,
        css: [{
            width: '550rpx',
            fontSize: `30rpx`,
            textAlign: 'left',
            lineHeight: '50rpx',
            left: 'calc(text4.left)',
            top: 'calc(text4_1.bottom + 10rpx)',
            color: '#263238',
        }, fontFamily]
    },
    {
        id: 'text9',
        type: 'text',
        text: `棵树苗，********** ${data.xxx} ********`,
        css: [{
            width: '550rpx',
            fontSize: `30rpx`,
            textAlign: 'left',
            lineHeight: '50rpx',
            left: 'calc(text8.left + text8.width + 10rpx)', 
                            // 相对 text8 来定位，因为给text8 设置了宽度，
                            // 某些机型不会将它读取为真实宽度，之前测试时
                            // text9都会接在text8后面，现在空出text8宽度, 还是上线后发现的
                            // 直接删了 text8.width 然后10rpx 改成 50rpx 或者调整text8宽度。

            left: 'calc(text8.left + 40rpx)',
            top: 'calc(text8.top)',
            color: '#263238',
        }, fontFamily]
    },

• 显示的文字内容固定并占满一行的话，可以考虑width:100% + textAlign: 'center',
• 定义一个通用变量，然后改下上面css的内容

    const fontFamily = { // 在组件上配置 use2D 属性才有用
        fontFamily: "字体名",
    }


    {
        id: 'bg_img',
        type: 'text',
        text: `${data.user_name}`,
        css: [{
            width: '100%',
            height: 'auto',
            top: 'calc(bg_img.top + 300rpx)', // 根据某个id值 来定位，确实好用
            textAlign: 'center',
        }, fontFamily],
    },

• 因为这个需要通过left,top这样的实现定位，所以我习惯根据固定一个点来放位置

    {
        id: 'text16',
        type: 'text',
        text: `${}`,
        css: [{
        width: '50rpx',
        fontSize: `${font_}rpx`,
        left:'calc(text15.right + 18rpx)',
        top: 'calc(text15.top)',
        color: `${color1}`,
        fontWeight: `${bold1}`,
        maxLines: 1,
        },fontFamily]
    },
    {
        id: 'text17',
        type: 'text',
        text: '',
        css: [{
        width: '160rpx',
        fontSize: `${font_}rpx`,
        textAlign: 'left',
        left:'calc(text16.left + text16.width + 20rpx)',
        top: 'calc(text16.top)',
        color: `${color1}`,
        fontWeight: `${bold}`,
        }, fontFamily]
    },
    {
        id: 'text17_1',
        type: 'text',
        text: '',
        css: [{
        width: '100%',
        fontSize: `${font_min}rpx`,
        textAlign: 'center',
        left:'',
        top: 'calc(text17.bottom + 40rpx)',
        color: `${color}`,
        fontWeight: `${bold}`,
        }]
    },