Javascript uint8clampedaray RGBA值始终返回所有0'；s（getImageData）

处理react组件，其中我的render（）中有以下内容：

不幸的是，我在控制台中看到的是某种Uint8ClampedArray，其中每个值都是0。老实说，我只希望rgba值位于图像的中心。如何使我的

getImageData

数组具有实际的rgba值

编辑： 我最初使用这个简单的函数： 但它也只返回0，请尝试以下操作：

showData = (url, x, y) => {
  let image_ = document.getElementById('map_image')
  image_.crossOrigin = 'Anonymous'
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  return Promise((resolve) => {
    image_.onLoad = () => {
      context.drawImage(image_, 0, 0, 100, 100);
      let data = context.getImageData(0, 0, 50, 50).data;
      console.log(data);
      resolve(data);
    };
  });
};

---

（代码根据kshetline的建议进行了修改，以支持通过promise返回数据。）

您需要等待图像加载后再绘制，否则您可能什么也得不到。就在我写这个答案的时候，其他人发布的代码会让你走上正轨，如果你想坚持

async

函数范式，只需要稍微修改一下，将

onload

函数作为一个承诺来处理

更新：以下是异步形式的代码：

showData = async (url, x, y) => {
            let image_ = document.getElementById("map_image")
            image_.crossOrigin = "Anonymous"

            await new Promise((resolve, reject) => {
              image_.onload = () => resolve()
              image_.onerror = err => reject(err)
            })

            let canvas = document.createElement('canvas');
            let context = canvas.getContext('2d');

            context.drawImage(image_, 0, 0, 100, 100)
            // No await here -- this method is synchronous
            let data = context.getImageData(0, 0, 50, 50).data
            console.log(data)
        }

---

是的，好的，所以你们的两个代码，在针对我的特殊情况做了一些小的修改后，都可以正常工作。我想我遗漏的中心思想是在getImageData上使用基于异步承诺的技术。这实际上就是问题的全部。我想我必须回顾一下如何实现承诺，以强制对这个问题和未来问题采取同步行为。非常感谢！不客气，请举手表决和/或按答覆的要求打分。我不能：（我的声誉太低了。我举手表决了你们两个，这根本不会表现出来。

showData = (url, x, y) => {
  let image_ = document.getElementById('map_image')
  image_.crossOrigin = 'Anonymous'
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  return Promise((resolve) => {
    image_.onLoad = () => {
      context.drawImage(image_, 0, 0, 100, 100);
      let data = context.getImageData(0, 0, 50, 50).data;
      console.log(data);
      resolve(data);
    };
  });
};

showData = async (url, x, y) => {
            let image_ = document.getElementById("map_image")
            image_.crossOrigin = "Anonymous"

            await new Promise((resolve, reject) => {
              image_.onload = () => resolve()
              image_.onerror = err => reject(err)
            })

            let canvas = document.createElement('canvas');
            let context = canvas.getContext('2d');

            context.drawImage(image_, 0, 0, 100, 100)
            // No await here -- this method is synchronous
            let data = context.getImageData(0, 0, 50, 50).data
            console.log(data)
        }