Lire des images et des données à l'aide de toile et de javascript

Dans cette vidéo, je vous emmènerai dans un voyage à travers les bases de la façon de lire dans les données d'image dynamiquement à l'aide de JavaScript. Ensemble, nous explorerons comment lire dans les données de l'image de trois manières différentes - à partir d'un nom de fichier spécifique sur votre serveur, en utilisant le champ de téléchargement de fichiers HTML et via glisser et déposer dans la fenêtre. Cette vidéo est l'une des dernières leçons du cours sur «Manipuler et l'utilisation d'images et de vidéos à l'aide de JavaScript» par moi-même, Patrick Catanzariti. Ce cours est disponible dès maintenant sur la plate-forme d'apprentissage de SitePoint Learnable.com! La toile Tag, la balise vidéo et JavaScript sont une équipe incroyable qui peut apporter un tout nouveau niveau de possibilités à vos créations Web. Dans le cours «Manipuler and Utilisation d'images et de vidéo à l'aide de JavaScript», vous apprendrez tout sur la façon de tirer et de manipuler des images et des vidéos à l'aide de HTML5 et JavaScript. Nous explorerons une gamme de possibilités de la modification des couleurs de base pour manipuler les données vidéo à l'aide de bibliothèques JavaScript telles que Three.js. Ce cours est disponible ici.

Questions fréquemment posées (FAQ) sur la lecture des données des images à l'aide de toile et javascript

Comment puis-je utiliser l'API FileReader pour lire les données d'image en javascript?

L'API FileReader est un outil puissant en JavaScript qui vous permet de lire le contenu des fichiers (ou tampons de données bruts) stockés sur le ordinateur de l'utilisateur. Pour lire les données de l'image, vous pouvez utiliser la méthode Readasdataurl, qui lit le contenu du blob ou du fichier spécifié. Lorsque l'opération de lecture est terminée, l'attribut de résultat contient des données: URL représentant les données du fichier.

Voici un exemple simple:

LET INPUT = Document.QuerySelector ('Input [Type = " Fichier "] ');
Laissez Reader = new FileReader ();

Reader.onLoad = function (e) {
LET img = new Image ();
img.src = e.target.result;
img.onload = function () {
// Les données d'image sont maintenant disponibles dans IMG
};
} ;

input.onchange = fonction (e) {
let file = e.target.files [0];
reader.readasdataurl (fichier);
};

Dans ce code, nous sélectionnons d'abord l'entrée de fichier et créons un nouveau fichier de fichier. Nous avons ensuite configuré un événement Onload pour le lecteur, qui crée une nouvelle image et définit sa source au résultat de l'opération de lecture. Enfin, nous avons configuré un événement OnChange pour l'entrée, qui lit le fichier sélectionné comme URL de données lorsque l'utilisateur sélectionne un fichier.

Comment puis-je extraire du texte d'une image à l'aide de JavaScript?

L'extraction du texte d'une image est un processus connu sous le nom de reconnaissance optique des caractères (OCR). JavaScript n'a pas de capacités OCR intégrées, mais il existe des bibliothèques disponibles qui peuvent vous aider, telles que Tesseract.js.

Voici un exemple de base de la façon dont vous pouvez utiliser Tesseract.js pour extraire du texte de Une image:

Laissez Tesseract = Besoin ('Tesseract.js');

Tesseract.Recognize (
'image.png',
'Eng',
{logger: m => console.log (m)}
). puis (({data: {text}}) => {
console.log (texte);
});

Dans ce code, nous avons d'abord besoin de la bibliothèque Tesseract.js. Nous appelons ensuite la méthode de reconnaissance, passant dans le fichier image, la langue («Eng» pour l'anglais) et une fonction de journalisation qui enregistre la progression de la reconnaissance. Une fois la reconnaissance terminée, la promesse est résolue avec un objet contenant le texte reconnu, que nous enregistrons à la console.

Veuillez noter que l'OCR est un processus complexe et que la précision de la reconnaissance peut varier en fonction de la Qualité de l'image et du texte à l'intérieur.

Comment puis-je créer un aperçu d'image à l'aide de JavaScript FileReader?

Créer un aperçu d'image avec JavaScript et FileReader implique la lecture du fichier image, puis l'afficher dans un élément HTML. Voici un exemple simple:

LET INPUT = Document.QuerySelector ('Input [Type = "File"]');
LET PREVEEVY = Document.QuerySelector ('img');

Selon Reader = new FileReader ();

Reader.onLoad = function (e) {
préview.src = e.target.result;
};

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

Dans ce code, nous sélectionnons d'abord l'entrée de fichier et l'élément d'image qui affichera l'aperçu. Nous créons ensuite un nouveau fichier FileReader et créons un événement Onload qui définit la source de l'image d'aperçu au résultat de l'opération de lecture. Enfin, nous avons configuré un événement OnChange pour l'entrée qui lit le fichier sélectionné comme URL de données lorsque l'utilisateur sélectionne un fichier.

Comment puis-je lire plusieurs fichiers avec JavaScript FileReader?

Si si Vous souhaitez lire plusieurs fichiers, vous pouvez le faire en faisant un peu enbout sur le tableau de fichiers de l'entrée de fichier. Voici un exemple:

LET Input = Document.QuerySelector ('Input [Type = "File"]');

input.onchange = function (e) {
pour (let i = 0; i LET {
console.log (e.target.result);
};

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

Dans ce code, nous sélectionnons d'abord l'entrée de fichier. Nous avons ensuite configuré un événement Onchange pour l'entrée qui boucle sur les fichiers sélectionnés, crée un nouveau fichier de fichier pour chacun et lit chaque fichier comme URL de données. Le résultat de chaque opération de lecture est enregistré à la console.

Comment puis-je gérer les erreurs lors de la lecture de fichiers avec JavaScript FileReader?

L'API FileReader fournit plusieurs événements que vous pouvez utiliser pour gérer les erreurs, y compris ONERROR et ONABORT. Voici un exemple de la façon dont vous pouvez utiliser ces événements:

LET INPUT = Document.QuerySelector ('Input [Type = "File"]');
Laissez Reader = new FileReader ();

reader.onload = fonction (e) {
console.log (e.target.result);
};

reader.onerror = function () {
console.error ('Une erreur s'est produite en lisant le fichier.');
};

reader.onabort = function () {
console.error ('l'opération de lecture était abordé. ');
};

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

Dans ce code, nous sélectionnons d'abord l'entrée de fichier et créons un nouveau fichier de fichier. Nous avons ensuite configuré des événements Onload, ONERROR et Onabort pour le lecteur. L'événement Onload enregistre le résultat de l'opération de lecture, tandis que les messages d'erreur de journalisation des événements OnError et Onabort. Enfin, nous avons configuré un événement OnChange pour l'entrée qui lit le fichier sélectionné sous forme d'URL de données lorsque l'utilisateur sélectionne un fichier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!