圖像分類的意義就是從圖像中提取盡可能多的信息。例如，當您將圖像上傳到 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 庫導入的預訓練圖像分類模型。我們通過傳遞圖像作為第一個參數和回調函數作為第二個參數來調用“預測”方法。在回調函數中，我們得到輸出或錯誤。
步驟
第 1 步 – 使用 CDN 在網頁代碼中添加“ml5.js”庫。
第 2 步 – 添加輸入以上傳文件并分類按鈕。
第 3 步 – 在 JavaScript 中，從 ml5.js 訪問所需的 HTML 元素和“MobileNet”模型。另外，模型加載完成后執行 modelLoad() 函數。
步驟 4 – 之后，每當用戶上傳圖像時，都會觸發事件并在回調函數中讀取圖像。另外，在屏幕上顯示圖像。
步驟 5 – 當用戶按下分類圖像按鈕時，使用圖像分類器的預測方法來預測有關圖像的信息。
示例 1
在下面的示例中，我們通過 CDN 將“ml5.js”庫添加到 部分。之后，每當用戶上傳圖像時，我們都會讀取它并將其顯示在屏幕上。接下來，當用戶按下分類按鈕時，我們使用預測方法從圖像中提取特征。在輸出中，用戶可以在圖像下方顯示有關圖像的信息。
<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”庫來提取圖像特征。我們可以使用現實生活中的圖像分類對圖像進行分類。此外，圖像分類還有許多其他用例。
以上就是使用 JavaScript 進行圖像分類的詳細內容，更多請關注www.92cms.cn其它相關文章！
