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

---

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

  }

---

问题完美解决

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

原著是一个有趣的人,若有侵权,请通知删除