ml5 讀取模型還是用 tensorflowjs 的函式，那我不如直接用 tensorflowjs 就好...
tf.loadGraphModel 回傳的物件是 Promise，要使用 await 才會等待模型讀完。
我還沒學過這些同步/非同步語法，所以就直接按網路上解法套 async 上去了。
canvas設定大小為 28 x 28，省下了縮放圖片的步驟。
然後就是手動把彩色轉灰色，
ctx.getImageData().data() 拿到的一維陣列格式是 rgba 紅綠藍加透明度。
於是按照格式拿出紅綠藍相加除 3 即可。
<meta charset="UTF-8">
<title>Image classification using tensorflow js </title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
</head>
<canvas id="defaultCanvas0" width="28" height="28">nocanvas</canvas>
<div id="log"></div>
</body>
</html>
<script>
(async () => {
const model = await tf.loadGraphModel('./web_model/model.json');
setdropupdate();
// document.getElementById("defaultCanvas0").getContext("2d").getImageData(0, 0, 28, 28);
function setdropupdate() {
var mycanvas = document.getElementById("defaultCanvas0");
var myimage = new Image();
var ctx = mycanvas.getContext("2d");
var fileReader = new FileReader();
mycanvas.ondragover = function (e) {
e.preventDefault();
mycanvas.ondrop = function (e) {
e.preventDefault();
let f = e.dataTransfer.files[0];
fileReader.readAsDataURL(f);
fileReader.onload = function () {
myimage.src = fileReader.result;
myimage.onload = function () {
ctx.drawImage(myimage, 0, 0, 28, 28);
let imgdata = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
let imgarray = Array(28);
for (x = 0; x < imgdata.width; x++) {
imgarray[x] = Array(28);
for (y = 0; y < imgdata.width; y++) {
let index = (x * 28 + y) * 4;
imgarray[x][y] = (imgdata.data[index] + imgdata.data[index+1] + imgdata.data[index+2]) / 3;
console.log(imgarray);
const prediction = model.predict(tf.tensor([imgarray]));
console.log(prediction);
alert(prediction);
})();
</script>
寫起來非常地不熟，而且動態語言使 vscode 不知道型別，
不知道型別就不給我列可以用的 function，得一直去查文檔才能知道 function 名稱。
該找時間學 JavaScript ES6 和 NodeJS，和 TypeScript 了...
