你好: 机型: 1) Android,HUAWEI Mate9 2) iPhone8Plus 微信版本均为6.6.7 代码片段: <a href="wechatide://minicode/53m1zVmd6vZL" target="_blank">wechatide://minicode/53m1zVmd6vZL</a>
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-06-04我也发现了,确切说是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上是反转的
canvasGetImageData返回的data数据与H5源生返回数据不同同样两张图片,对应同样的canvas大小(即图片本身大小),用H5 canvas获取到的数据与小程序内wx.canvasGetImageData获取到的数据有很大差距!(数组长度是相同的,但数据不同) H5获取数据如下: [图片] 小程序获取数据如下: [图片] 目测是api处理数据有误差?望排查~
2018-06-04