ios微信小程序canvas动态给宽高的bug

    技术2023-05-24  71

    最近在用小程序新版canvas写分享海报的时候,发现ios有bug。 刚开始把canvas的宽高直接写死,测试是没问题的。

    <canvas type="2d" id="shareImg" style="width: 530rpx; height: 943rpx;" ></canvas>

    后来新增了个页面,也要用到分享海报,并且图片尺寸的比例不一样了,我就尝试将之前的分享海报封装成组件。内部就不展示了,宽度改成动态传入,高度也跟随改动。

    <canvas type="2d" id="shareImg" style="width: {{width}}rpx; height: {{width * canvasHeight / canvasWidth}}rpx;" ></canvas>

    安卓没有问题,但是同事的iPhone就不行了,canvas的比例不对,宽度比预想的小了很多。百度没找到解决方案,最后十分无奈,只能把宽高改回去,完全写死,如下。这样的结果就是,对图片的比例要求一致,不能自适应了。

    <canvas type="2d" id="shareImg" style="width: 530rpx; height: 943rpx;" ></canvas>

    PS:宽高写死后,我发现比例不符合要求的图片在ios不会被拉伸,正常应该是拉伸适应我给定的宽高的,安卓也是拉伸的。

    Processed: 0.015, SQL: 9