收藏
回答

iOS/Android上canvasGetImageData行为不一致

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug canvasGetImageData 客户端 6.6.7 2.0.0

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  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • 娇华
    娇华
    2018-06-04

    你好,还请麻烦你提供一下以下信息,谢谢,辛苦了:

    1、提供出现问题的机型和微信版本号

    2、提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html


    2018-06-04
    赞同
    回复
  • 文东
    文东
    2018-06-04

    你好:


    机型:

    1) Android,HUAWEI Mate9

    2) iPhone8Plus


    微信版本均为6.6.7


    代码片段: wechatide://minicode/53m1zVmd6vZL

    2018-06-04
    赞同
    回复
  • 黄思程
    黄思程
    2018-06-11

    你好,问题已复现,我们会尽快进行修复。

    2018-06-11
    赞同
    回复
  • 差不多姑娘、
    差不多姑娘、
    2018-07-19

    建一个隐藏的canvas,然后在这个canvas上绘制两个已知像素信息的点,再把这个canvas的信息与已知的像素信息比较,从而得出当前平台导出的图片是否上下颠倒;如果颠倒的话,reverse通过wx.canvasGetImageData得到的像素信息

    知乎上这个方案亲测有效。

    https://zhuanlan.zhihu.com/p/37440710

    2018-07-19
    赞同
    回复