Uint8ClampedArray RGBA值不断返回全0（getImageData）[重复]

Question

在我的 render() 中有以下内容的反应组件上工作：

<img id="map_image" src={this.state.last_parking.url} />

this.state.last_parking.url 只是我在当地保存的一些网址。

我想要这张图片中 rgba 颜色的值。所以我做了一个这样的函数，它通过 id map_image 使用我的 img 元素：

showData = async (url, x, y) => {
            let image_ = document.getElementById("map_image")
            image_.crossOrigin = "Anonymous"
            let canvas = document.createElement('canvas');
            let context = canvas.getContext('2d');

            context.drawImage(image_, 0, 0, 100, 100)
            let data = await context.getImageData(0, 0, 50, 50).data
            console.log(data)
        }

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

编辑： 我最初使用这个简单的功能： https://coderwall.com/p/iyhizq/get-the-pixel-data-of-an-image-in-html 但它也只返回 0

Answer 1

您需要等待图像加载后才能绘制，否则您可能什么也得不到。就像我在写这个答案一样，其他人发布的代码会让你走上正确的轨道，如果你想坚持async，它只需要稍微修改一下就可以将onload 函数作为Promise 处理函数范式。

更新：这是异步形式的代码：

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)
        }

Answer 2

请试试这个：

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 的建议修改代码以支持通过承诺返回数据。）