mnist
Version:
mnist digits
44 lines (42 loc) • 1.68 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MNIST Digits Simples</title>
<script src="./dist/mnist.js"></script>
<script>
window.onload = function() {
var simplesCount = 20;
var size = 28;
var canvas = document.getElementById("mnistCanvas");
canvas.height = size*simplesCount;
var ctx = canvas.getContext("2d");
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var colOffset, rowOffcet;
for (var col=0;col < 10; col++) {
colOffset = col*size;
var digits = mnist[col].range(0, simplesCount-1);
for (var row=0;row < simplesCount; row++) {
var digit = digits[row];
rowOffcet = row*size;
for (var i = 0; i < digit.length; i++) {
var pointColor = digit[i] * 255;
var position = (colOffset+(rowOffcet + Math.floor(i/size))*canvas.width) + (i % size);
canvasData.data[position * 4 + 0] = 255-pointColor;
canvasData.data[position * 4 + 1] = 255-pointColor;
canvasData.data[position * 4 + 2] = 255-pointColor;
canvasData.data[position * 4 + 3] = 255;
}
}
}
ctx.putImageData(canvasData, 0, 0);
}
</script>
</head>
<body>
<h1>MNIST Digits Simples</h1>
<canvas id="mnistCanvas" width="280" height="280">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>