ml5 读取模型还是用 tensorflowjs 的函式,那我不如直接用 tensorflowjs 就好...
tf.loadGraphModel 回传的物件是 Promise,要使用 await 才会等待模型读完。
我还没学过这些同步/非同步语法,所以就直接按网路上解法套 async 上去了。
canvas设定大小为 28 x 28,省下了缩放图片的步骤。
然後就是手动把彩色转灰色,
ctx.getImageData().data() 拿到的一维阵列格式是 rgba 红绿蓝加透明度。
於是按照格式拿出红绿蓝相加除 3 即可。
<html>
<head>
<meta charset="UTF-8">
<title>Image classification using tensorflow js </title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
</head>
<body>
<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 了...
>>: Day19 - 【概念篇】OAuth flows: Device Code(1)
前几个篇章中,若使用到客户端 (如GDC/GBC) 呈现画面时,Hello World 都只能出现...
Agenda 资安宣言 测试环境与工具 前情提要 学习目标 技术原理与程序码 References ...
程序的执行基本上是循序渐进的。程序的执行未必一定是由上到下,一行一行的执行。 有时内容会因为判断,或...
前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...
首先我们这是为了开发Android App,所以我们需要一只Android 手机,但由於自身是IOS...