Argument of CanvasRenderingContext2D.getImageData is not a finite floating-point value

Question

Я новичок в работе с canvas, прошу помочь. Использую метод getImageData() для получения массива данных из изображения. JavaScript-код представлен ниже:

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');

ctx.fillRect(100,50,150,75);

var pixel = ctx.getImageData(0,0, ctx.width, ctx.height);
console.log(pixel);

HTML-код

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <script src="js.js" defer></script>
    </head>
    <body>
        <canvas id="c1"></canvas>
    </body>
</html>

в консоли выдает следующую ошибку "Argument 3 of CanvasRenderingContext2D.getImageData is not a finite floating-point value" . Аргумент 3 не является конечным значением с плавающей точкой. Как привести аргументы к типу float?

Answer 1

Вы пытаетесь получить width и height ctx, а надо canvas!

var pixel = ctx.getImageData(0,0, canvas.width, canvas.height); // ЗДЕСЬ

Можно так глянуть все не 0:

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');

ctx.fillRect(100,50,150,75);

var pixel = ctx.getImageData(0,0, canvas.width, canvas.height);
var notZero = pixel.data.filter(v => v); // Все значения не 0, 0 = false

console.log(notZero);

<canvas id="c1"></canvas>

БЛОГ НА HUSL

Argument of CanvasRenderingContext2D.getImageData is not a finite floating-point value

Ответы (1 шт):