[微信小程序]iphone5s利用canvas压缩照片截取不全 [想家人了就给家里通个话嘛!]

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


在做图片上传的功能时,需要通过canvas对图片进行压缩再上传,其他机型都是可以正常压缩的,但是在iphone5s下只能截取照片的一部分,不知道这个问题怎么解决。

小米note3显示的图片

iphone5s显示的图片,只能截取左上角的部分

  • 麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题, 这是要互相加qq的节奏。
    • JS: wx.getImageInfo({ src: tempFilePaths[0], success: function (res) { var ctx = wx.createCanvasContext('photo_canvas'); var canvasWidth = res.width var canvasHeight = res.height; var str = canvasWidth / canvasHeight; if (str > 1) { console.log('heng') if (canvasWidth > _this.data.screenWidth){ canvasHeight = _this.data.screenHeight; canvasWidth = str * canvasHeight; //横版图片 _this.setData({ canvasHeight: canvasHeight, canvasWidth: canvasWidth, }) } else { _this.setData({ canvasHeight: canvasHeight, canvasWidth: canvasWidth, }) } } else { if (canvasHeight > _this.data.screenHeight){ canvasWidth = _this.data.screenWidth; canvasHeight = canvasWidth / str; //竖版图片 _this.setData({ canvasWidth: canvasWidth, canvasHeight: canvasHeight, }) } else { _this.setData({ canvasWidth: canvasWidth, canvasHeight: canvasHeight, }) } } //设置canvas尺寸 ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight) ctx.draw(true, function () { }); } }) WXML: <canvas canvas-id="photo_canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position: absolute;left:0px;top:0px; "></canvas> 这样可以吗? , 说的貌似很有深意,你能一条一条说么?
    • 麻烦按照上面提供的教程来提供代码片段, 好像听懂了。
    • 代码片段:https://developers.weixin.qq.com/s/sj0Hlkm9796y 微信开发者工具显示正常,但是真机的时候显示不全,谢谢 , 我知道你不知道我知不知道