真机预览报错，海报无法生成 canot read property 'done'

[W-tomoe]

let painter = new Painter(uni.createCanvasContext("veeker-poster"));

           await uni.showToast({
                title: '图片生成中...',
                icon: 'none'
            });

            // 绘画白色背景
            await painter.draw({
                type: "rect",
                top: 0, 
                width: that.poster.w, 
                height: that.poster.h, 
                background: "#ffffff"
            })

            // 绘画封面图
            let mainX,mainY = 0
            const mainW = 375 * 2
            const mainH = 490 * 2
            await painter.draw({
                type: "image", 
                top: mainX, 
                left: mainY, 
                width: mainW, 
                height: mainH, 
                src: that.posterData.posterUrl
            })

            // 绘画二维码
            const codeSize = 90 * 2
            const codeX = (that.poster.w / 2 - codeSize / 2) * 2
            const codeY = 505 * 2
            console.log(codeX,'codeX')
           await  painter.draw({
                type: "image", 
                top: codeY, 
                left: codeX, 
                width: codeSize, 
                height: codeSize, 
                src: that.posterData.qrcodeUrl
            })
			

            // 绘画文字说明
            console.log(painter)
            const userTitle = that.posterData.userTitle
            const textLineCount = painter.ctx.measureText(userTitle).width / 315
            // 多行
            if(textLineCount > 1) {
               await  painter.draw({
                    type: "text-block",
                    top: 620,
                    left: 30,
                    width: 315,
                    fontSize: 16,
                    lineClamp: 2,
                    lineHeight: 30, 
                    content: userTitle
                })
            // 一行
            }else {
                await painter.draw({
                    type: "text-block",
                    top: 630,
                    left: 30,
                    fontSize: 16,
                    width: 315,
                    lineClamp: 2,
                    lineHeight: 30, 
                    content: userTitle
                })
            }

[xlfsummer]

https://cli.vuejs.org/zh/config/#transpiledependencies

尝试在 vue.config.js 的 transpileDependencies 中增加 "mp-painter" 看看

[W-tomoe]

https://cli.vuejs.org/zh/config/#transpiledependencies

尝试在 vue.config.js 的 transpileDependencies 中增加 "mp-painter" 看看

可以了大佬，，但是有些问题，计算文字居中然后绘画，但实际不居中。
如下，官方直销说明，我是加多了15让文字在海报中水平居中显示。邀请人说明，理论应该（画报宽度-文字宽度-右边距 靠右，但是我不减去右边距才能实现。累啦，明天再交流

const ctx = uni.createCanvasContext("canvas-poster")
		    uni.showToast({
		        title: '图片生成中...',
		        icon: 'none'
		    });

		    let painter = new Painter(ctx, { upx2px(rpx){ return rpx; }})

		    // 绘画白色背景
		    await painter.draw({
		        type: "rect",
		        top: 0,
		        width: that.poster.w,
		        height: that.poster.h,
		        background: "#ffffff"
		    })

		    // 绘画封面图
		    let mainX,mainY = 0
		    const mainW = 375
		    const mainH = 490
		    await painter.draw({
		        type: "image",
		        top: mainX,
		        left: mainY,
		        width: mainW,
		        height: mainH,
		        src: that.posterData.showImg
		    })

		    // 绘画二维码
		    const codeSize = 80
		    const codeX = 20
		    const codeY = 510
		    await painter.draw({
		        type: "image",
		        top: codeY,
		        left: codeX,
		        width: codeSize,
		        height: codeSize,
		        src: that.posterData.qrcodeUrl
		    })

		    // 绘画文字说明
		    const title = `仅${that.posterData.price}元${that.posterData.title}`
            const textLineCount = ctx.measureText(title).width / 240
		    // 多行
		    if(textLineCount > 1) {
		        await painter.draw({
		            type: "text-block",
		            top: 530,
		            left: 110,
		            width: 240,
		            fontSize: 16,
		            lineClamp: 2,
		            lineHeight: 30,
		            content: title
		        })
		    // 一行
		    }else {
		        await painter.draw({
		            type: "text",
		            top: 540,
		            left: 110,
		            fontSize: 16,
		            content: title
		        })
            }
            
            // 邀请人说明
            const userTitle = that.posterData.userTitle
            const userX = that.poster.w - painter.ctx.measureText(userTitle).width
            await painter.draw({
                type: "text",
                top: 600,
                left: userX,
                fontSize: 14,
                content: userTitle
            })

            // 官方直销说明
            const descTitle = that.posterData.ticketsDesc
>            const descX = (that.poster.w - painter.ctx.measureText(descTitle).width) / 2 + 15
            await painter.draw({
                type: "text",
                top: 640,
                left: descX,
                fontSize: 12,
                color: "#999999",
                content: descTitle
            })

[xlfsummer]

你给的代码太复杂，又不能直接运行，我不太明白你想问什么，想画成什么样。
居中的话，你可以设置文字的水平位置 (left) 为 375，然后设置 align: center。