Membaca gambar dan data menggunakan kanvas dan javascript

Dalam video ini, saya akan membawa anda dalam perjalanan melalui asas -asas cara membaca dalam data imej secara dinamik menggunakan JavaScript. Bersama -sama kami akan meneroka cara membaca dalam data imej dalam tiga cara yang berbeza - dari nama fail tertentu pada pelayan anda, menggunakan medan muat naik fail HTML dan melalui seret dan jatuh ke dalam tetingkap. Video ini adalah salah satu pelajaran terkini dari kursus mengenai "memanipulasi dan menggunakan imej dan video menggunakan JavaScript" sendiri, Patrick Catanzariti. Kursus ini tersedia sekarang di platform pembelajaran SitePoint Learnable.com! Kanvas Tag, tag video, dan JavaScript adalah pasukan yang luar biasa yang boleh membawa tahap kemungkinan baru ke ciptaan web anda. Dalam kursus "memanipulasi dan menggunakan imej dan video menggunakan JavaScript", anda akan belajar semua tentang cara menarik dan memanipulasi imej dan video menggunakan HTML5 dan JavaScript. Kami akan meneroka pelbagai kemungkinan daripada menukar warna asas untuk memanipulasi data video menggunakan perpustakaan JavaScript seperti Three.js. Kursus ini boleh didapati di sini.

Soalan Lazim (Soalan Lazim) Mengenai Bacaan Data Imej Menggunakan Kanvas dan JavaScript

bagaimana saya boleh menggunakan API fileReader untuk membaca data imej dalam javascript? komputer pengguna. Untuk membaca data imej, anda boleh menggunakan kaedah ReadasDataurl, yang membaca kandungan gumpalan atau fail yang ditentukan. Apabila operasi bacaan selesai, atribut hasil mengandungi data: URL yang mewakili data fail. Fail "] '); biarkan pembaca = fileReader baru ();

reader.onload = function (e) { let img = new Imej (); img.src = e.target.result;

img.onload = function () { // Data imej kini boleh didapati di img

}; ;

input.onchange = function (e) { let file = e.target.files [0];
Reader.ReadAsDataurl (File);
};

Dalam kod ini, kita mula -mula memilih input fail dan buat fileReader baru. Kami kemudian menyediakan acara Onload untuk pembaca, yang mencipta imej baru dan menetapkan sumbernya kepada hasil operasi bacaan. Akhirnya, kami menyediakan acara onchange untuk input, yang membaca fail yang dipilih sebagai URL data apabila pengguna memilih fail.

Bagaimana saya boleh mengekstrak teks dari imej menggunakan javascript?

Mengekstrak teks dari imej adalah proses yang dikenali sebagai pengiktirafan aksara optik (OCR). JavaScript tidak mempunyai keupayaan OCR terbina dalam, tetapi ada perpustakaan yang boleh membantu dengan ini, seperti tesseract.js. Imej:

biarkan tesseract = Memerlukan ('tesseract.js');

tesseract.recognize (
'image.png',
'eng',
{logger: m => console.log (m) }
). Kemudian (({data: {text}}) => {
console.log (teks); ); Kami kemudian memanggil kaedah pengiktirafan, lulus dalam fail imej, bahasa ('eng' untuk bahasa Inggeris), dan fungsi logger yang melepasi kemajuan pengiktirafan. Apabila pengiktirafan selesai, janji itu diselesaikan dengan objek yang mengandungi teks yang diiktiraf, yang kami log masuk ke konsol. kualiti imej dan teks di dalamnya. JavaScript dan Filereader melibatkan membaca fail imej dan kemudian memaparkannya dalam elemen HTML. Berikut adalah contoh mudah:

biarkan input = document.QuerySelector ('input [type = "file"]);
let preview = document.QuerySelector (' img ');

let Reader = fileReader baru ();
reader.onload = function (e) {
pratonton.src = e.Target.Result; };

input.onchange = function (e) {

let file = e.target.files [0];

reader.readasDataurl (fail) ;
};

Dalam kod ini, kita mula -mula memilih input fail dan elemen imej yang akan memaparkan pratonton. Kami kemudian membuat filereader baru dan menubuhkan acara Onload yang menetapkan sumber imej pratonton kepada hasil operasi bacaan. Akhirnya, kami menyediakan acara onchange untuk input yang membaca fail yang dipilih sebagai URL data apabila pengguna memilih fail. Anda ingin membaca pelbagai fail, anda boleh melakukannya dengan melengkapkan pelbagai fail input fail. Berikut adalah contoh:

biarkan input = document.QuerySelector ('input [type = "file"]);

input.onchange = function (e) { untuk (biarkan i = 0; fungsi (e) {
console.log (e.target.result);
};

reader.readasdataurl (e.target.files [i]); >};

Dalam kod ini, kita mula -mula memilih input fail. Kami kemudian menyediakan acara onchange untuk input yang melingkari fail yang dipilih, mencipta filereader baru untuk setiap satu, dan membaca setiap fail sebagai URL data. Hasil dari setiap operasi bacaan dilog masuk ke konsol.

Bagaimana saya boleh mengendalikan kesilapan apabila membaca fail dengan filereader JavaScript? Berikut adalah contoh bagaimana anda boleh menggunakan peristiwa -peristiwa ini:

biarkan input = document.QuerySelector ('input [type = "file"]');
reader.onload = function (e) {
console.log (e.Target.Result); ; 🎜>}; let file = e.target.files [0];
};

Dalam kod ini, kita mula -mula memilih input fail dan buat filereader baru. Kami kemudian menyediakan acara Onload, OneRror, dan Onabort untuk pembaca. Acara OnLoad log hasil operasi bacaan, manakala mesej ralat log onError dan Onabort. Akhirnya, kami menyediakan acara onchange untuk input yang membaca fail yang dipilih sebagai URL data apabila pengguna memilih fail.

Atas ialah kandungan terperinci Membaca gambar dan data menggunakan kanvas dan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!