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>