微信小程序开发过程中，总会遇到关于图片上传的问题，网络上一搜索，大多是这样的

---

canvas= wx.createCanvasContext(canvasID)

canvascanvas.drawImage(imgPath,0,0, imgWidth, imgHeight)

canvas.draw(false, () => {

    wx.canvasGetImageData({canvasId: canvasID,x:0,y:0,width: imgWidth,height: imgHeight, success(res) {

    let pngData = upng.encode([res.data.buffer], res.width, res.height)

    let base64 = wx.arrayBufferToBase64(pngData)

}

 })})

---

回答这个问题的童鞋们肯定没有用苹果手机测试过，用这个代码，在苹果手机下图片是上下颠倒的，这个是微信的坑，有问题的是这句

wx.canvasGetImageData({ canvasId: canvasID, x:0, y:0,width: imgWidth,height: imgHeight, success(res) {

所以需要对返回的res做兼容处理，如下

---

let platform = wx.getSystemInfoSync().platform

 if (platform == 'ios') {

    res = that.reverseImgData(res)

}

---

这里需要用到的本地reverseImgData函数也贴出来

---

reverseImgData(res) {

    var w = res.width

    var h = res.height

    let con = 0

    for (var i = 0; i < h / 2; i++) {

      for (var j = 0; j < w * 4; j++) {

        con = res.data[i * w * 4 + j]

        res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]

        res.data[(h - i - 1) * w * 4 + j] = con

      }

    }

    return res

  }

---

问题完美解决

如果觉得文章写的好，请不吝赞赏

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/12802.html