javascript - getImageData() 数组在角度 5 中返回全 0

Question

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

我的代码：

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， getImageData 总是返回 0

但是没有一个答案能解决它。我究竟做错了什么？

标签： javascriptangularecmascript-6getimagedata

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