使用畫布和JavaScript讀取圖像和數據

在此視頻中，我將帶您介紹如何使用JavaScript動態閱讀圖像數據的基礎知識。我們將共同探討如何以三種不同的方式讀取圖像數據：從服務器上的特定文件名，使用HTML文件上傳字段以及通過拖放到窗口中。 該視頻是我本人帕特里克·卡坦扎里蒂（Patrick Catanzariti）的課程中有關“操縱和使用JavaScript的圖像和視頻”課程的最新課程之一。該課程現在可以在SitePoint的Learning Platform Learnable.com上使用！ 畫布 標籤，視頻標籤和JavaScript是一支令人難以置信的團隊，可以為您的網絡創建帶來全新的可能性。在“使用JavaScript操縱和使用圖像和視頻”課程中，您將了解有關如何使用HTML5和JavaScript操縱圖像和視頻的所有信息。我們將探索從更改基本顏色到使用JavaScript庫（例如Trix.js）操縱視頻數據的一系列可能性。 本課程可在這裡提供。

>使用畫布和javascript讀取圖像數據的常見問題（常見問題解答）

>我如何使用FileReader API在JavaScript中讀取圖像數據？

> FileReader API是JavaScript中的一個功能強大的工具，可讓您讀取存儲在文件的內容（或原始數據緩衝區）的內容用戶的計算機。要讀取圖像數據，您可以使用ReadAsdataurl方法，該方法讀取指定的斑點或文件的內容。讀取操作完成後，結果屬性包含一個數據：表示文件數據的URL。 file“]'）'）;

讓讀取器= new FileReader（）; 讓IMG = new image（）;
img.src = e.target.result;
img.onload = function（）{
//現在可以在img
}中使用圖像數據;
} ;

input.onchange = function（e）{
>讓file = e.target.files [0]; > Reader.ReadAsdataurl（file）;
};

在此代碼中，我們首先選擇文件輸入並創建一個新的fileReader。然後，我們為讀者設置了一個Onload事件，該事件創建了一個新圖像，並將其源設置為讀取操作的結果。最後，我們為輸入設置了一個Onchange事件，當用戶選擇文件時，該事件將所選文件讀取為數據URL 。

>如何使用JavaScript從圖像中提取文本？ JavaScript沒有內置的OCR功能，但是有可用的庫可以幫助您使用，例如tesseract.js。圖像：

讓tesseract = require（'tesseract.js'）;


'image.png'，
'eng'，
{logger：m = > console.log（m）}
）。然後（（{data：{text}}}）=> > console.log（text）;
}）;

在此代碼中，我們首先需要tesseract.js庫。然後，我們調用識別方法，傳遞圖像文件，語言（英語的“英語”）以及記錄識別進度的記錄器函數。識別識別完成後，承諾將用包含識別文本的對象解決，我們將其登錄到控制台。

請注意，OCR是一個複雜的過程，並且識別的準確性可能會根據圖像的質量及其內部文本。
>
>如何使用JavaScript FileReader構建圖像預覽？ FileReader涉及讀取圖像文件，然後將其顯示在HTML元素中。這是一個簡單的示例：

let input = document.queryselector（'input [type =“ file”]']'）;
讓preview = document.queryselector（'img'）;

讓閱讀器= new FileReader（）; };


input.onput.onchange = function（e）{
讓file = e.target.files [0];
reader.readasdataurl（file） ;
};


在此代碼中，我們首先選擇將顯示預覽的文件輸入和圖像元素。然後，我們創建一個新的FileReader，並設置一個Onload事件，該事件將預覽映像的來源設置為讀取操作的結果。最後，我們為輸入設置了一個on Change事件，當用戶選擇文件時，該事件將所選文件讀取為數據URL。您想讀取多個文件，可以通過在文件輸入的文件陣列上循環循環。以下是一個示例：

讓input = document.queryselector（'input [type =“ file”]'）;



input.onchange = function（e） {

i = 0; i console.log（e.target.Result）;};

reader.readasdataurl（e.target.files [i]） >};

>在此代碼中，我們首先選擇文件輸入。然後，我們為在所選文件上循環的輸入設置一個onchange事件，為每個文件創建一個新的fileReader，並將每個文件讀取為數據URL。每個讀取操作的結果都記錄到控制台。

>使用JavaScript FileReader讀取文件時，我該如何處理錯誤？

> FileReader API提供了幾個您可以使用這些事件來處理錯誤的事件，包括OnError和Onabort。以下是如何使用以下事件的示例：

讓input = document.queryselector（'input [type =“ file”]']）;
>
reader.onload =函數（e）{> console.log（e.target.result）;
};


reader.onerror = function（）{ console.error（'讀取文件時發生了錯誤。'）; };


reader.onabort = function（）{console.error（'讀取操作是中止。'）;
};


input.onchange = function（e）{
讓file = e.target.files [0]; reader.readaSdataurl（file）;
};


在此代碼中，我們首先選擇文件輸入並創建一個新的fileReader。然後，我們為讀者設置Onload，Onerror和Onabort活動。 Onload事件記錄了讀取操作的結果，而OnError和Onabort事件日誌錯誤消息。最後，我們為輸入設置了一個Onchange事件，該事件將所選文件讀取為數據URL時，當用戶選擇文件時。

以上是使用畫布和JavaScript讀取圖像和數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！