Uint8ClampedArray RGBA 值不断返回所有 0 (getImageData)

Question

处理一个反应组件，我的render((中有以下内容：

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

this.state.last_parking.url只是我保存在本地州的一些URL。

我想要此图像中 rgba 颜色的值。所以我做了一个这样的函数，它通过 idmap_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 的建议修改代码，以支持通过 promise 返回数据。