圖像分類的意義就是從圖像中提取盡可能多的信息。例如，當(dāng)您將圖像上傳到 Google 相冊時，它會從圖像中提取信息并根據(jù)該信息建議位置。
我們可以使用OpenCV檢測圖像中的每一個微小信息并預(yù)測圖像。
使用 JavaScript 從頭開始??訓(xùn)練和測試模型需要付出大量的努力，而且還需要包含不同圖像的正確數(shù)據(jù)集。因此，在本教程中，我們將使用ml5.js的預(yù)訓(xùn)練模型對圖像進行分類。
ml5.js 庫包含各種預(yù)先訓(xùn)練的模型，使開發(fā)人員的工作更輕松。此外，它還使用瀏覽器的 GPU 來執(zhí)行數(shù)學(xué)運算，使其更加高效。
語法
用戶可以按照以下語法使用ml5.js庫對圖像進行分類。
image_classifier.predict(image, function (err, outputs) {
if (err) {
return alert(err);
} else {
output.innerText = outputs[0].label;
}
});
登錄后復(fù)制
在上述語法中，“image_classifier”是從 ml5.js 庫導(dǎo)入的預(yù)訓(xùn)練圖像分類模型。我們通過傳遞圖像作為第一個參數(shù)和回調(diào)函數(shù)作為第二個參數(shù)來調(diào)用“預(yù)測”方法。在回調(diào)函數(shù)中，我們得到輸出或錯誤。
步驟
第 1 步 – 使用 CDN 在網(wǎng)頁代碼中添加“ml5.js”庫。
第 2 步 – 添加輸入以上傳文件并分類按鈕。
第 3 步 – 在 JavaScript 中，從 ml5.js 訪問所需的 HTML 元素和“MobileNet”模型。另外，模型加載完成后執(zhí)行 modelLoad() 函數(shù)。
步驟 4 – 之后，每當(dāng)用戶上傳圖像時，都會觸發(fā)事件并在回調(diào)函數(shù)中讀取圖像。另外，在屏幕上顯示圖像。
步驟 5 – 當(dāng)用戶按下分類圖像按鈕時，使用圖像分類器的預(yù)測方法來預(yù)測有關(guān)圖像的信息。
示例 1
在下面的示例中，我們通過 CDN 將“ml5.js”庫添加到 部分。之后，每當(dāng)用戶上傳圖像時，我們都會讀取它并將其顯示在屏幕上。接下來，當(dāng)用戶按下分類按鈕時，我們使用預(yù)測方法從圖像中提取特征。在輸出中，用戶可以在圖像下方顯示有關(guān)圖像的信息。
<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>
登錄后復(fù)制
示例
在下面的示例中，用戶可以將圖像鏈接粘貼到輸入字段中。之后，每當(dāng)他們按下獲取圖像按鈕時，它就會在網(wǎng)頁上顯示圖像。接下來，當(dāng)用戶單擊分類圖像按鈕時，他們可以在屏幕上看到包含圖像信息的輸出。
<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>
登錄后復(fù)制
用戶學(xué)會了使用 JavaScript 中的預(yù)訓(xùn)練模型對圖像進行分類。我們使用“ml5.js”庫來提取圖像特征。我們可以使用現(xiàn)實生活中的圖像分類對圖像進行分類。此外，圖像分類還有許多其他用例。
以上就是使用 JavaScript 進行圖像分類的詳細內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
