微信小程序开发过程中，总会遇到关于图片上传的问题，网络上一搜索，大多是这样的
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
}
问题完美解决
如果觉得文章写的好，请不吝赞赏
