getImageData()数组正在返回角度5中的所有0

Question

在画布内渲染图像后，我正在尝试获取图像的rgb值。然而，我得到了所有的0作为回报。我正在尝试在渲染图像后使用getImageData((，不确定为什么我会得到0s作为回报。

我的代码：

fileSelected: File;
preview: any;
context: CanvasRenderingContext2D;
hue: any;
myImageData:any
onFileSelect(e: any) {
let canvas = this.mycanvas.nativeElement;
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height)
let imgData;
this.fileSelected = e.target.files[0];
let reader = new FileReader()
reader.onload = (e: any) => {
var image = new Image();
image.onload = function () {
image.width = canvas.width;
image.height = canvas.height;
context.drawImage(image, 0, 0, canvas.width, canvas.height)
};
image.src = e.target.result
}
reader.readAsDataURL(this.fileSelected);
this.myImageData = context.getImageData(0, 0, 100, 100);
this.hue = this.calculateHue(this.fileSelected, this.myImageData);
}
calculateHue(file, myImageData) {
console.log("rgb====", myImageData.data)
return null
}

我已经通过了这些链接getImageData((返回所有零，getImageData(返回所有0'；s、 getImageData总是返回0

但没有一个答案能解决问题。我做错了什么？

Answer 1

图像一加载就写入画布，但文件一选择就试图从画布读取，移动：

this.myImageData = context.getImageData(0, 0, 100, 100);
this.hue = this.calculateHue(this.fileSelected, this.myImageData);

进入image.onload和context.drawImage(image, 0, 0, canvas.width, canvas.height)调用之后，这样您就可以确保有可以读取的图像数据。

它应该看起来像这样：

onFileSelect(e: any) {
let canvas = this.mycanvas.nativeElement;
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height)
let imgData;
this.fileSelected = e.target.files[0];
let reader = new FileReader();
let self = this;
reader.onload = (e: any) => {
var image = new Image();
image.onload = () => {
image.width = canvas.width;
image.height = canvas.height;
context.drawImage(image, 0, 0, canvas.width, canvas.height)
// Move it here
self.myImageData = context.getImageData(0, 0, 100, 100);
self.hue = this.calculateHue(self.fileSelected, self.myImageData);
};
image.src = e.target.result
}
reader.readAsDataURL(this.fileSelected);
}