数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 JavaScript 进行图像分类
图像分类的含义是从图像中提取尽可能多的信息。例如，当您将图像上传到 Google 相册时，它会从图像中提取信息并根据该信息建议位置。
我们可以使用 OpenCV 从图像中检测每个小信息并预测图像。
使用 JavaScript 从头开始训练和测试模型需要大量工作，并且还需要包含不同图像的适当数据集。因此，在本教程中，我们将使用 ml5.js 的预训练模型对图像进行分类。
ml5.js 库包含各种预训练模型，使开发人员的生活更轻松。此外，它使用浏览器的 GPU 执行数学运算，使其效率更高。
语法
用户可以按照以下语法使用 ml5.js 库对图像进行分类。
image_classifier.predict(image, function (err, outputs) {
if (err) {
return alert(err);
} else {
output.innerText = outputs[0].label;
}
});
在上述语法中，“image_classifier” 是从 ml5.js 库导入的预训练图像分类模型。我们通过传递图像作为第一个参数和回调函数作为第二个参数来调用“predict”方法。在回调函数中，我们获得输出或错误。
步骤
步骤 1 - 使用 CDN 将“ml5.js”库添加到网页代码中。
步骤 2 - 添加输入以上传文件和分类按钮。
步骤 3 - 在 JavaScript 中，访问所需的 HTML 元素和 ml5.js 中的“MobileNet”模型。此外，在模型加载完成后执行 modelLoad() 函数。
步骤 4 - 之后，每当用户上传图像时，触发事件并在回调函数中读取图像。此外，在屏幕上显示图像。
步骤 5 - 当用户按下分类图像按钮时，使用图像分类器的预测方法来预测有关图像的信息。
示例 1
在下面的示例中，我们已通过 CDN 将“ml5.js”库添加到<head>部分。之后，每当用户上传图像时，我们都会读取它并在屏幕上显示它。接下来，当用户按下分类按钮时，我们使用 predict 方法从图像中提取特征。在输出中，用户可以在图像下方显示有关图像的信息。
<html>
<head>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
<h4 id = "content"> Wait until model loads. </h4>
<input type = "file" name = "Image" id = "upload_image" accept = "jpg,jpeg,png">
<br> <br>
<img src = "" class = "image" id = "show_image" width = "300px" height = "300px">
<br>
<button class = "button" id = "triggerClassify"> Classify the image </button>
<br>
<h2 id = "output"> </h2>
<script>
window.onload = function () {
// access all HTML elements and image classifier
const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
const triggerClassify = document.getElementById("triggerClassify");
const upload_image = document.getElementById("upload_image");
const show_image = document.getElementById("show_image");
const output = document.getElementById("output");
// when the model is loaded, show the message
function modelLoaded() {
let content = document.getElementById("content");
content.innerText = "Model is loaded! Now, test it by uploading the image.";
}
// When the user uploads the image, show it on the screen
upload_image.onchange = function () {
if (this.files && this.files[0]) {
// using FileReader to read the image
var reader = new FileReader();
reader.onload = function (e) {
show_image.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
}
};
// classify the image when the user clicks the button
triggerClassify.onclick = function (e) {
// predict the image using the model
image_classifier.predict(show_image, function (err, outputs) {
if (err) {
return err;
} else {
// show the output
output.innerText = outputs[0].label;
}
});
};
}
</script>
</body>
</html>
示例
在下面的示例中，用户可以在输入字段中粘贴图像链接。之后，每当他们按下获取图像按钮时，它都会在网页上显示图像。接下来，当用户单击分类图像按钮时，他们可以在屏幕上看到包含图像信息的输出。
<html>
<head>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
<h4 id = "content"> Wait until model loads. </h4>
<input type = "text" id = "link_input" placeholder = "Paste image link here">
<button id = "fetch_image"> Fetch Image </button>
<br> <br>
<img src = "" id = "show_image" width = "300px" height = "300px" crossorigin = "anonymous">
<img src = "" class = "image" id = "imageView">
<br>
<button class = "button" id = "triggerClassify"> Classify the image </button>
<br>
<h2 id = "output"> </h2>
<script>
window.onload = function () {
// access all HTML elements and image classifier
const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
const triggerClassify = document.getElementById("triggerClassify");
let link_input = document.getElementById("link_input");
const show_image = document.getElementById("show_image");
const output = document.getElementById("output");
// when the model is loaded, show the message
function modelLoaded() {
let content = document.getElementById("content");
content.innerText = "Model is loaded! Now, test it by uploading the image.";
}
fetch_image.onclick = function (e) {
let link = link_input.value;
console.log(link);
if (link != null && link != undefined) {
show_image.src = link;
}
};
triggerClassify.onclick = function (e) {
image_classifier.predict(show_image, function (err, outputs) {
if (err) {
console.error(err);
} else {
output.innerText = outputs[0].label;
}
});
};
}
</script>
</body>
</html>
用户学习了如何使用 JavaScript 中的预训练模型对图像进行分类。我们使用“ml5.js”库来提取图像特征。我们可以使用图像分类对现实生活中的图像进行分类。此外，图像分类还有许多其他用例。
914 次浏览
