开发工具上使用可以生成，真机联调canvas空白

[W-tomoe]

我的代码如下:

<script>
import Painter from "mp-painter";
export default {
    data() {
        return {
            poster: {
                h: 950,
                w: 750
            },
            posterData: null,
            preImg: null,
        }
    },
    onLoad(options) {
        this.posterData = options
    },
    async onReady() {
        const that = this
        let painter = new Painter(uni.createCanvasContext("canvas-poster"));
        uni.showToast({
            title: '图片生成中...',
            icon: 'none'
        });

        await painter.draw({
            type: "rect",
            top: 0, 
            width: that.poster.w, 
            height: that.poster.h, 
            background: "#ffffff"
        })

        await painter.draw({
            type: "image", 
            top: 0, 
            left:0, 
            width: 750, 
            height: 750, 
            src: that.posterData.showImg
        })

        await painter.draw({
            type: "image", 
            top: 770, 
            left: 40, 
            width: 160, 
            height: 160, 
            src: that.posterData.qrcodeUrl
        })

        await painter.draw({
            type: "text-block",
            top: 840,
            left: 240,
            width: 450,
            lineClamp: 2,
            lineHeight: 32, 
            content: `仅${that.posterData.price}元${that.posterData.title}`
        })

      
            uni.canvasToTempFilePath({
                canvasId: 'canvas-poster',
                x:0,
                y: 0,
                width: that.poster.w,
                height: that.poster.h,
                success(rs) {
                    that.preImg =  rs.tempFilePath;
                    uni.hideLoading();
                },
                fail(rs) {
                    that.preImg =  rs.tempFilePath;
                    uni.hideLoading();
                }
            })
        
    },
    methods: {
        save() {
            const that = this
            uni.saveImageToPhotosAlbum({
                filePath: that.preImg,
                success() {
                    uni.showModal({
                        content: '图片已保存到相册，赶紧晒一下吧~',
                        showCancel: false,
                        confirmText: '好的',
                        confirmColor: '#ff500',
                        success(rs) {

                        },
                        fail(rs) {
                            that.show = true
                        }
                    })
                },
                fail() {
                    uni.showToast({
                        title: '保存失败',
                        icon:'none'
                    });
                }
            })
        }
    }
}
</script>

[xlfsummer]

我试了你发的 js 代码，可以生成，没有问题，需要上传一个可以运行的最简示例， 以帮助排除问题。

[W-tomoe]

我试了你发的 js 代码，可以生成，没有问题，需要上传一个可以运行的最简示例， 以帮助排除问题。

是ios flex布局的问题，谢谢。

[heiiwa]

麻烦问一下最后怎么解决的嘛 我刚好遇见 用的是uni-app

[W-tomoe]

麻烦问一下最后怎么解决的嘛 我刚好遇见 用的是uni-app

你真机预览image src有地址吗？如果有的话检查一下图片容器高度。我是因为ios flex布局差异，图片高度丢失导致图片不显示。