收藏
回答

canvasGetImageData返回的data数据与H5源生返回数据不同

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

同样两张图片,对应同样的canvas大小(即图片本身大小),用H5 canvas获取到的数据与小程序内wx.canvasGetImageData获取到的数据有很大差距!(数组长度是相同的,但数据不同)


H5获取数据如下:



小程序获取数据如下:



目测是api处理数据有误差?望排查~

最后一次编辑于  2018-05-18  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • 文东
    文东
    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上是反转的

    2018-06-04
    赞同 1
    回复 1
    • 邈缈
      邈缈
      2018-06-12

      咦。。。等我有时间了再试试Orz,之前写demo发现无法获取到正确数据就搁置做其他项目了,thanks anyway~

      2018-06-12
      回复
  • 邈缈
    邈缈
    2018-05-21

    这个还有解吗?

    2018-05-21
    赞同
    回复 2
    • 文东
      文东
      2018-06-04
      现在能想到的办法就是,先默默的画两个色块,尝试取值,看看是不是反了。如果反了,程序里自己转换下... 好麻烦
      2018-06-04
      回复
    • naeco
      naeco
      2018-06-10

      怎么转换呢?

      2018-06-10
      回复
  • -
    -
    2018-05-27

    我也碰到了这个问题,好像data是对应的原图像翻转后的数据

    对小程序团队很失望啊

    2018-05-27
    赞同
    回复 1
    • 邈缈
      邈缈
      2018-05-28

      咦?怎么个翻转法

      2018-05-28
      回复
  • 夏日柚子茶
    夏日柚子茶
    2018-08-21

    手动实现了一下反转

    // /utils/util.js

    const concatArrayBuffer = (... arrays => {

    let totalLength ;

    for let arr of arrays ) {

    totalLength += arr length ;

    }

    let result new Uint8ClampedArray totalLength );

    let offset ;

    for let arr of arrays ) {

    result set arr offset );

    offset += arr length ;

    }

    return result ;

    }


    const revertImage = ( data width height => {

    if (! data return data ;

    let dataViews = [];

    let len width ;

    for let height ++) {

    let start width ;

    let newBuff data slice start start len );

    dataViews unshift newBuff );

    }

    let result concatArrayBuffer (... dataViews );

    return result buffer ;

    }


    module exports = {

    revertImage

    }


    // /pages/XXXPage.js

    wx canvasGetImageData ({

    canvasId: 'myCanvas' ,

    x: ,

    y: ,

    width: width ,

    height: height ,

    success res ) {

    wx hideLoading ();

    // 3. IOS图像反转

    let buffer res data buffer ;

    try {

    let systemInfo wx getSystemInfoSync ();

    let platform systemInfo platform ;

    if platform === 'ios' ) {

    buffer util revertImage res data res width res height );

    }

    catch ) {

    }

    ......


    2018-08-21
    赞同
    回复