小程序编辑器和手机上都在按钮和画布之间有一个白条

[923132714]

Description

编辑器中正好差50px，手机上则小于50px（vivo x6）。 尝试去掉屏幕高度-50，电脑上似乎可以了，但是手机上就变成全屏的，按不了按钮了。

Environment

• Platform: [开发者工具/Andriod]
• Platform version: [开发者工具v1.01.1712150/Andriod 5.1.1]
• Wechat version: [微信版本号6.5.23]
• we-cropper version: [1.1.5]

Reproduce

[如何重现问题]

[How to reproduce the issue] 单独取出局部切割图片文件，style，we-copper。功能没问题，但是按钮和画布间多了个白条

Observed Results

[实际表现]

[Observed Results]

Expected Results

[期望表现]

[Expected Results] 不想要白条

Relevant Code / Logs

// TODO(you): code or logs ohere to reproduce the problem

[qiulimao]

你应该是用了tapbar。我也遇到这个问题，就是因为使用了tapbar，导致微信小程序获取可用高度(wx.wx.getSystemInfoSync().windowHeight)时出bug。我的处理方案是：把 cropper-wrapper 这个class的背景处理成和canvas背景颜色一致。这样就看不出来了。

[xiaoyu2er]

不要使用 windowHeight - 50, 直接使用 windowHeight 就好

[MeloGuo]

自己调一下高度就好了。

[hobbyren]

借楼问一下安卓机测试，裁剪完图片偶尔会出现图片上一层白白的，预览图片成暗，求大神解答

[ttys026]

wss里面添加

page {
    height: 100%;
}

也可以解决

[chatugpt]

var width = 0; var height = 0;

Page({ data: { cropperOpt: { id: 'cropper', width, height, scale: 2.5, zoom: 5, quality: 2, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 300 } } },

onLoad(option) {
    const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 50

    var that = this;
    this.setData({
        cropperOpt: {
            id: 'cropper',
            width,
            height,
            scale: 2.5,
            zoom: 5,
            quality: 2,
            cut: {
                x: (width - 300) / 2,
                y: (height - 300) / 2,
                width: 300,
                height: 300
            }
        }
    });

    这样解决