Uncaught ReferenceError: canvas is not defined at script.js:1:1

canvas.addEventListener('mousedown', function (e) {
    context.moveTo(mouse.x, mouse.y);
    context.beginPath();
    canvas.addEventListener('mousemove', onPaint, false);
}, false); var onPaint = function () {
    context.lineTo(mouse.x, mouse.y);
    context.stroke();
};

canvas.addEventListener('mouseup', function () {
    $('#number').html('<img id="spinner" src="spinner.gif"/>');
    canvas.removeEventListener('mousemove', onPaint, false);
    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, 28, 28);
        data = context.getImageData(0, 0, 28, 28).data;
        var input = [];
        for (var i = 0; i < data.length; i += 4) {
            input.push(data[i + 2] / 255);
        }
        predict(input);
    };
    img.src = canvas.toDataURL('image/png');
}, false);

// Setting up tfjs with the model we downloaded
tf.loadLayersModel('model / model.json')
    .then(function (model) {
        window.model = model;
    });

// Predict function
var predict = function (input) {
    if (window.model) {
        window.model.predict([tf.tensor(input)
            .reshape([1, 28, 28, 1])])
            .array().then(function (scores) {
                scores = scores[0];
                predicted = scores
                    .indexOf(Math.max(...scores));
                $('#number').html(predicted);
            });
    } else {

        // The model takes a bit to load,
        // if we are too fast, wait
        setTimeout(function () { predict(input) }, 50);
    }
}

HTML код

<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js">
    </script>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <h1>Digit Recognition WebApp</h1>

    <div id="paint">
        <canvas id="myCanvas"></canvas>
    </div>

    <div id="predicted">
        Recognized digit
        <div id="number"></div>
        <button id="clear">Clear</button>
    </div>
    
    <script src="script.js"></script>
</body>

</html>

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

Автор решения: Алексей Яковлев

canvas не найден. Ищите в коде, где вы его создаёте и как

→ Ссылка