Массив getImageData () возвращает все 0 в угловых 5 - PullRequest
Новая
       37

Массив getImageData () возвращает все 0 в угловых 5

0 голосов
/ 02 декабря 2018

Я пытаюсь получить значение rgb изображения после рендеринга изображения внутри canvas.Однако я получаю все 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

Но ни один из ответов не помог.Что я делаю не так?

1 Ответ

0 голосов
/ 02 декабря 2018

Вы пишете на холст, как только изображение загружено, однако вы пытаетесь прочитать с холста, как только файл выбран, переместите: 

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