收藏
回答

canvasGetImageData 返回输入真机和开发环境不一致!

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

我认为是官方接口的一个BUG!canvas的canvasGetImageData方法,在开发环境和真机,返回的数组不一致!


我的场景是canvas画一个二维码,然后识别二维码。结果在开发环境可以正确识别结果,但是真机报错。


通过多次检查,发现真机的canvasGetImageData方法,返回的数组和开发环境是不一致的。


通过简单的像素测试,代码如下:

wx.canvasGetImageData({

canvasId: 'target',

x: 0,

y: 0,

width: 300,

height: 300,

success: function (res) {

    for (var i = 0 + 300 * 3 * 105; i < 3 * 300 + 300 * 3 * 105; i++)

    res.data[i] = 99;

。。。。


我强制修改像素,在开发环境,修改的线条在图片上方,而真机线条在图像下方。明显矩阵是倒置的。

最后一次编辑于  2018-03-14  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

8 个回答

  • 黄思程
    黄思程
    2018-03-21

    麻烦给个相关的代码片段(https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/minicode.html),我们定位下问题

    2018-03-21
    赞同
    回复
  • 黄思程
    黄思程
    2018-03-15

    能否提供下完整的demo

    2018-03-15
    赞同
    回复
  • 包万荣
    包万荣
    2018-05-15

    +1 同样的问题:wx.canvasGetImageData获得图像数据顺序在模拟器和ios真机不一致

    2018-05-15
    赞同
    回复
  • 福克斯
    福克斯
    2018-04-09

    我也遇到这个问题,IOS用getImageData方法拿到的数组,转成base64后,显示的图片是翻转倒置的,安卓和模拟器都是好的,不知道什么原因,很无奈。

    2018-04-09
    赞同
    回复
  • 辰
    2018-03-22

    wechatide://minicode/CTBbQ6mH6nYZ


    在代码片段的时候,canvas.drawImage不知道为什么没反应。代码没错

    2018-03-22
    赞同
    回复
  • Jerry Yang
    Jerry Yang
    2018-03-21

    @辰: 请问这个问题解决了吗?

    2018-03-21
    赞同
    回复
  • Jerry Yang
    Jerry Yang
    2018-03-21

    在微信平台下开发小程序,接口输出的数据应该一致,如果是ios不一致,也应该由基础库去实现

    2018-03-21
    赞同
    回复
  • 辰
    2018-03-15

        const ctx = wx.createCameraContext();

        const ctx2 = wx.createCanvasContext('target');

        ctx.takePhoto({

          quality: 'high',

          success: (res) => {

            ctx2.drawImage(res.tempImagePath, 0, 0, 300, 300);

            ctx2.draw(false, function (ret) {

              wx.canvasGetImageData({

                canvasId: 'target',

                x: 0,

                y: 0,

                width: 300,

                height: 300,

                success: function (res) {

                  that.___takePhotoSuccess(res);

                }

              }); // ---- canvasGetImageData


            }); // ---- draw

          },

          fail: function () {

            console.log('fail')

          }

        }); // ---- takePhoto



      ___takePhotoSuccess: function (res) {

        var origin = res.data; // 这玩意IOS是反的!!!!必须手动翻转!!!

       if (app.globalData.systemInfo.platform == 'ios') {

          var flipper = new Uint8ClampedArray(res.data.length);

          for (var row = 0; row < this.data.qrHeight; row++) {

            var startIndex = 4 * this.data.qrWidth * row;

            var endIndex = 4 * this.data.qrWidth * (row + 1);

            var pixels = res.data.slice(startIndex, endIndex);

            pixels.forEach(function (value, index, array) {

              flipper[4 * that.data.qrWidth * (that.data.qrHeight - row) + index] = value;

            });

          }

          res.data = flipper;


    ................... 逻辑处理

      },


    这个代码再普通不过了。

    2018-03-15
    赞同
    回复