CanvasとJavaScriptを使用して画像とデータを読み取ります

このビデオでは、JavaScriptを使用して画像データを動的に読み取る方法の基本を旅します。一緒に、サーバー上の特定のファイル名から、HTMLファイルアップロードフィールドを使用して、ドラッグアンドドロップを使用して、3つの異なる方法で画像データを読み取る方法を検討します。 このビデオは、「JavaScriptを使用して画像やビデオを操作して使用する」というコースの最新のレッスンの1つであるPatrick Catanzaritiです。このコースは現在、SitePointの学習プラットフォームLearnable.comで利用できます！ キャンバス タグ、ビデオタグ、およびJavaScriptは、Web Creationsにまったく新しいレベルの可能性をもたらすことができる素晴らしいチームです。 「JavaScriptを使用した画像とビデオの操作と使用」コースでは、HTML5とJavaScriptを使用して画像とビデオを操作する方法についてすべてを学びます。基本色の変化から、3つのjsなどのJavaScriptライブラリを使用してビデオデータの操作まで、さまざまな可能性を調査します。 このコースはこちらから入手できます。 キャンバスとjavaScriptを使用して画像データを読み取ることについてのよくある質問（FAQ）

FileReader APIを使用してJavaScriptの画像データを読み取るにはどうすればよいですか？

FileReader APIは、JavaScriptの強力なツールであり、ファイル（または生データバッファー）の内容を読み取ることができます。ユーザーのコンピューター。画像データを読み取るには、指定されたBLOBまたはファイルの内容を読み取るReadasDataurlメソッドを使用できます。読み取り操作が終了すると、結果属性にはデータが含まれます。ファイルのデータを表すfile "]] '）;

let reader = new fileReader（）;

reader.onload = function（e）{
let img = new image（）;
img.src = e.target.result;
img.onload = function（）{
//画像データはimg
};
}で利用可能になりました。 ;

input.OnChange = function（e）{
let file = e.target.files [0];
reader.readasdataurl（file）;
};

このコードでは、最初にファイル入力を選択し、新しいfileReaderを作成します。次に、読者向けにオンロードイベントを設定します。これにより、新しい画像が作成され、読み取り操作の結果にソースを設定します。最後に、ユーザーがファイルを選択したときに選択したファイルをデータURLとして読み取る入力のオンチェンジイベントを設定します。 JavaScriptを使用して画像からテキストを抽出するにはどうすればよいですか？

​​

画像からテキストを抽出することは、光学文字認識（OCR）と呼ばれるプロセスです。 JavaScriptには組み込みのOCR機能がありませんが、tesseract.js。

など、これに役立つライブラリがあります。これは、tesseract.jsを使用してテキストを抽出する方法の基本的な例です。画像：

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

tesseract.ecognize（
'image.png'、
'eng'、
{logger：m => console.log（m）}
）。 > console.log（text）;
}）;

このコードでは、最初にtesseract.jsライブラリが必要です。次に、認識メソッドを呼び出し、画像ファイル、言語（英語の「ENG」）、および認識の進行を記録するロガー関数を渡します。認識が完了すると、認識されたテキストを含むオブジェクトで約束が解決されます。これはコンソールにログに記録します。OCRは複雑なプロセスであり、認識の精度は異なる場合があります。画像の品質とその中のテキスト。 FileReaderは、画像ファイルを読み取り、HTML要素に表示することを伴います。簡単な例は次のとおりです。

let input = document.querySelector（ 'input [type = "file"]'）;
let preview = document.queryselector（ 'img'）;
leter = new fileReader（）;

reader.onload = function（e）{

preview.src = e.target.result;

};

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

このコードでは、最初にファイル入力とプレビューを表示する画像要素を選択します。次に、新しいFilReaderを作成し、読み取り操作の結果にプレビュー画像のソースを設定するオンロードイベントを設定します。最後に、ユーザーがファイルを選択したときに選択したファイルをデータURLとして読み取る入力のオンチェンジイベントを設定します。複数のファイルを読みたい場合は、ファイル入力のファイル配列をループすることでそうすることができます。例は次のとおりです。

let input = document.queryselector（ 'input [type = "file"]'）;

input.onChange = function（e）{
i = 0; i };

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

};

このコードでは、最初にファイル入力を選択します。次に、選択したファイルにループする入力のオンチェンジイベントを設定し、それぞれの新しいファイルリーダーを作成し、各ファイルをデータURLとして読み取ります。各読み取り操作の結果はコンソールにログに記録されます。JavaScript fileReaderを使用してファイルを読み取るときにエラーを処理するにはどうすればよいですか？

FileReader APIには、OnErrorやOnabortなどのエラーを処理するために使用できるイベントがいくつかあります。これらのイベントを使用する方法の例は次のとおりです。

reader.onload = function（e）{
console.log（e.target.result）;
};

reader.onerror = function（）{
console.error（ 'ファイルの読み取り中にエラーが発生しました。'）;
};

reader.onabort = function（）{
console.error（ '読み取り操作は中止されました。'）;
};

入力。 e.target.files [0];
reader.readasdataurl（file）;
};

このコードでは、最初にファイル入力を選択し、新しいfilReaderを作成します。次に、読者のためにOnload、Onerror、およびOnabortイベントを設定します。オンロードイベントは、読み取り操作の結果を記録しますが、OnerrorおよびOnabortイベントにはエラーメッセージが記録されます。最後に、ユーザーがファイルを選択したときに、選択したファイルをデータURLとして読み取る入力のオンチェンジイベントを設定します。

以上がCanvasとJavaScriptを使用して画像とデータを読み取りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。