資料結構
網路
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 次瀏覽
