Day 18 ml5.js-2

衔接 Day 16 的 ml5.js 范例，我们可以把辨识流程改成上传图片的形式。

之前的范例使用 F12 查看 html，可以看到它 canvas 的 id 是 defaultCanvas0。

於是可以写一个函数去取代它的拖拉动作。

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, 400, 400);

        classifier.classify(myimage, gotResult);
    };
}

将修改拖拉事件的函式放在 createCanvas 後面，
因为呈现的 Canvas 是 createCanvas 後才制造出来的。

function setup() {
    createCanvas(400, 400);
    classifier.classify(img, gotResult);
    image(img, 0, 0);

    setdropupdate()
}

显示资讯方面，在 index 中加入 <div id="log"></div> 做为输出

<html>

<head>
  <meta charset="UTF-8">
  <title>Image classification using MobileNet and p5.js</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>

<body>
  <h1>Image classification using MobileNet and p5.js</h1>
  <script src="sketch.js"></script>
  <div id="log"></div>
</body>

</html>

修改 gotResult 的回应，改为将输出写在 div log 中。

// A function to run when we get any errors and the results
function gotResult(error, results) {
    // Display error in the console
    if (error) {
        console.error(error);
    } else {
        // The results are in an array ordered by confidence.
        console.log(results);
        //createDiv(`Label: ${results[0].label}`);
        //createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
        document.getElementById("log").innerText = `Label: ${results[0].label}\n` + `Confidence: ${nf(results[0].confidence, 0, 2)}`;
    }
}

https://i.imgur.com/2wEzytl.mp4


<<:  Day18 Android - RecyclerView应用

>>:  Cross validation是哪位？

Day7 使用 Vercel 发布我们的 Next.js 网站，搭配 Github 实现自动部署

上一篇我们建完 Next.js 专案了，并且能成功在自己的电脑上开发改 code 了！下一步就是要来...

[JS] You Don't Know JavaScript [this & Object Prototypes] - Object [番外 - getter/setter]

前言 我们在Object [下]中有提到 getter / setter，由於这个部分在书中的解释是...

Swift 新手－物联网与 iOS App的整合运用

APPIOT 指物联网应用程序，是应用在物联网上的智慧型手机应用程序，APP 是应用程序（appli...

DAY 8 - 瓦斯弹

今天继续来练习阴影~ 因为要方便练习~ 所以选一个简单的圆形怪物 我就选了瓦斯弹~ 用他来练习阴影 ...

[iT铁人赛Day2]JAVA的设定变数

在JAVA中，可以设定一些的变数，例如：long, int, char, float,...等等 l...