Commentaire: Même si l'image en ligne est codée en base64, l'avantage est qu'il peut réduire les demandes HTTP, mais l'inconvénient est qu'il ne peut pas être mis en cache entre les domaines. Utilisez la fonction ReadAsDataurl dans l'API de fichier HTML5. Il s'agit d'un code qui convertit le fichier en base64.
Je viens d'entrer en contact avec le concept d'images inclinées. Même si les images inclinées sont codées dans Base64, en regardant le code suivant, c'est un problème en ligne.Il peut réduire les demandes HTTP, mais l'inconvénient est qu'il ne peut pas être mis en cache dans les domaines!
<img src = "data: image / jpeg; base64, / 9j / 4qqsrx ...">
Ensuite, comment convertir les images en base64 en ligne
Si vous comptez uniquement sur un simple JavaScript, vous avez des problèmes d'autorisation et vous n'autorisez pas les fichiers locaux ou les dossiers à fonctionner pour des problèmes de sécurité
Maintenant que HTML5 arrive à Baidu, il y a beaucoup d'informations sur le chinois et de nombreux autres documents pour W3C
Nous utilisons maintenant la fonction ReadAsDataurl dans l'API de fichier HTML5, qui est un fichier de conversion en codage Base64.
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Test de fichier HTML5 simple pour PIC2Base64 </Title>
<style>
</ style>
<cript>
window.onload = function () {
var input = document.getElementById ("Demo_Input");
var result = document.getElementById ("résultat");
var img_area = document.getElementById ("img_area");
if (typeof (fileReader) === 'Undefined') {
résultat.innerhtml = "Désolé, votre navigateur ne prend pas en charge FileReader, veuillez utiliser un navigateur moderne pour fonctionner!";
input.setAttribute ('Disabled', 'Disabled');
} autre {
input.addeventListener ('change', readfile, false);}
}
fonction readFile () {
var fichier = this.files [0];
// Ici, nous jugeons le type si ce n'est pas une image, puis le retournez et le supprimez et téléchargez un fichier
if (! / image /// w + /. test (file.type)) {
alert ("Veuillez vous assurer que le fichier est le type d'image");
retourne false;
}
var Reader = new FileReader ();
Reader.ReadAsDataurl (fichier);
reader.onload = fonction (e) {
résultat.innerhtml = '<img src = "' + this.result + '" />';
img_area.innerhtml = '<div> Image IMG TAG Affichage: </ div> <img src = "' + this.result + '" />';
}
}
</cript>
</ head>
<body>
<input type = "file" value = "sdgsdg" />
<TextArea Rows = 30 Cols = 300> </ TextArea>
<p> </p>
</docy>
</html>