建一个隐藏的canvas,然后在这个canvas上绘制两个已知像素信息的点,再把这个canvas的信息与已知的像素信息比较,从而得出当前平台导出的图片是否上下颠倒;如果颠倒的话,reverse通过[代码]wx.canvasGetImageData[代码]得到的像素信息。 知乎上这个方案亲测有效。 https://zhuanlan.zhihu.com/p/37440710
iOS/Android上canvasGetImageData行为不一致https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000406550b8478e773c63883f5bc00&highline=canvasGetImageData&token=505890645 已经有人提问了,但没看到官方恢复。当前的版本依然是错误的 我也发现了,确切说是iOS是反转的,Android和模拟器下正常。 写了个简单的测试代码: [代码]<!--pages/test/test.wxml-->[代码][代码]<[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]canvas[代码] [代码]canvas-id[代码][代码]=[代码][代码]'mycanvas'[代码] [代码]style[代码][代码]=[代码][代码]"width:20px; height: 20px;"[代码][代码]></[代码][代码]canvas[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]text[代码][代码]>[代码][代码] [代码][代码]color at (10, 5): {{color1}}[代码][代码] [代码][代码]color at (10, 15): {{color2}}[代码][代码] [代码][代码]</[代码][代码]text[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] [代码]// pages/test/test.js[代码][代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]color1: [代码][代码]''[代码][代码],[代码][代码] [代码][代码]color2: [代码][代码]''[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]onLoad() {[代码][代码] [代码][代码]this[代码][代码].draw()[代码][代码] [代码][代码]setTimeout(() => {[代码][代码] [代码][代码]this[代码][代码].getImage()[代码][代码] [代码][代码]}, 1000)[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]draw() {[代码][代码] [代码][代码]const ctx = wx.createCanvasContext([代码][代码]'mycanvas'[代码][代码])[代码] [代码] [代码][代码]ctx.beginPath()[代码][代码] [代码][代码]ctx.rect(0, 0, 20, 10)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'red'[代码][代码])[代码][代码] [代码][代码]ctx.fill()[代码][代码] [代码][代码]ctx.closePath()[代码][代码] [代码][代码]// ctx.draw()[代码] [代码] [代码][代码]ctx.beginPath()[代码][代码] [代码][代码]ctx.rect(0, 10, 20, 10)[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'blue'[代码][代码])[代码][代码] [代码][代码]ctx.fill()[代码][代码] [代码][代码]ctx.closePath()[代码][代码] [代码][代码]ctx.draw()[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]getImage() {[代码][代码] [代码][代码]const self = [代码][代码]this[代码][代码] [代码][代码]wx.canvasGetImageData({[代码][代码] [代码][代码]canvasId: [代码][代码]'mycanvas'[代码][代码],[代码][代码] [代码][代码]x: 0,[代码][代码] [代码][代码]y: 0,[代码][代码] [代码][代码]width: 20,[代码][代码] [代码][代码]height: 20,[代码][代码] [代码][代码]success(image) {[代码][代码] [代码][代码]console.log(image.data)[代码][代码] [代码][代码]self.setData({[代码][代码] [代码][代码]color1: self.getColor(image, 10, 5),[代码][代码] [代码][代码]color2: self.getColor(image, 10, 15)[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码] [代码][代码]fail(error) {[代码][代码] [代码][代码]console.error(error)[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]getColor(image, x, y) {[代码][代码] [代码][代码]const i = (x + image.width * y) * 4[代码][代码] [代码][代码]const r = image.data[i + 0][代码][代码] [代码][代码]const g = image.data[i + 1][代码][代码] [代码][代码]const b = image.data[i + 2][代码][代码] [代码][代码]const a = image.data[i + 3][代码] [代码] [代码][代码]return[代码] [代码]`rgba(${r}, ${g}, ${b}, ${a})`[代码][代码] [代码][代码]}[代码][代码]})[代码] 简单讲,就是上面画了红色矩形,下方是蓝色。然后对上下两个位置去颜色值。 Android上取值正确,iOS上是反转的
2018-07-19