收藏
回答

putimagedata和getimagedata在ios中坐标系原点错误

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

你想反馈一个 Bug


如果是 Bug:

使用wx.canvasPutImageData 画一组Uint8ClampedArray数据时,在微信开发者工具和安卓手机端看到的图如下:



而在IOS手机看到的图如下:



canvas的坐标系原点是在左上角,但是微信的putimagedata和getimagedata在IOS上的坐标系原点在左下角。


* 提供一个最简复现 Demo

var rectdata = [

    0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, ..............   //因为提问字数限制,删除了剩余数据

];


Page({

    data: {

        motto: 'Hello World',

        userInfo: {}

    },

    putDraw: function() {

        const rectData = new Uint8ClampedArray(rectdata);

        wx.canvasPutImageData({

            canvasId: 'secCanvas',

            x: 20,

            y: 20,

            width: 60,

            data: rectData,

            success(res) {

                console.log(res)

            },

            fail(res) {

                console.log(res)

            }

        })

    },

    onLoad: function() {},

    onReady: function() {

        this.putDraw()

    }

})


希望官方能尽快修复该bug~~


最后一次编辑于  2018-02-02
回答关注问题邀请回答
收藏

4 个回答

  • 夏日柚子茶
    夏日柚子茶
    2018-08-21

    手动实现了一下反转

    // /utils/util.js

    const concatArrayBuffer = (...arrays) => {

    let totalLength = 0;

    for (let arr of arrays) {

    totalLength += arr.length;

    }

    let result = new Uint8ClampedArray(totalLength);

    let offset = 0;

    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 * 4;

    for (let i = 0; i < height; i++) {

    let start = i * width * 4;

    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: 0,

    y: 0,

    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 (e) {

    }

    ......


    2018-08-21
    赞同
    回复
  • -
    -
    2018-05-27

    尼玛三个月了官方没人吗

    2018-05-27
    赞同
    回复
  • Kyle
    Kyle
    2018-04-25

    mark

    2018-04-25
    赞同
    回复
  • benniu
    benniu
    2018-02-05

    有没有微信的同学能看下这个问题啊~

    2018-02-05
    赞同
    回复