真机预览报错，海报无法生成 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。