Explication détaillée du schéma d'URI de données et exemples d'utilisation et méthode de mise en œuvre du codage en base64 d'image_html5 compétences du didacticiel-Tutoriel H5-php.cn

1. Introduction au schéma d'URI de données

Le schéma d'URI des données est défini dans la RFC2397. Le but est d'intégrer de petites données directement dans des pages Web, afin qu'il ne soit pas nécessaire de les charger à partir de fichiers externes. Par exemple, la chaîne de caractères ci-dessus est en fait une petite image. Copiez et collez ces caractères dans la barre d'adresse de Firefox et accédez-y, et vous la verrez, une image png blanche et grise 1X36.
Dans l'URI de données ci-dessus, data représente le nom du protocole pour obtenir des données, image/png est le nom du type de données, base64 est la méthode d'encodage des données et ce qui suit la virgule est les données codées en base64 de l'image. /png fichier.
Vous avez peut-être remarqué que sur certaines pages Web, l'URL de l'image d'arrière-plan src ou css de l'image n'est pas notre lien d'image en ligne commun, mais une grande chaîne de caractères, comme celle-ci :

Copier le code

Le code est le suivant :

data:image/gif;base64,R0lGODlhkQAtAKIAAAAAAP///1a 5zfn9/// / wAAAAAAAAAAAACH5BAEAAAQALAAAAACRAC0AQAP/SLrc/jDKSau9uIrsxN5cAxJeSI5MmV6q4r1w3JKRDC/2W1Mz3/GoVO8UE2GGK MEVQoKP04XKJqJBj /DpUVGXgb3vAA/GWIz2EFekxIq8WLcnxNr8sddnd7bUn7v2 V /e4BjhIaDg4WJinCBhWdvi5B/j5WIgolvelxCIU5bSRygV1kQOVoySyY0WkqfnKESr7GotDtStzi4OLNSSKgzvxZIpKC6rKKrysNWxstHzs UjZWPmYbUlpOLbZds1YeU3mjj5OWObF1565Pg7nqQm uzz5PT2m6I3ykXPyzf8 fQd8XfMRItopqiQ0oBslUKEpgp6upJKRMVSEpccHOgi/9eDUVZqdRqGMSJGYR2JQDNWrJWtkR8hpnyZ0Ei0KTJ3meT1ZMqPnC6BlpzZ8VPFHEZt1Cgi7CIRgTGhPkVKVeFIJ jUdgqojj52ye/H6iQ0hTh6iPWglzTFXj5u2b rSxcUDTw6ftXceiBPkhtCcs2XNgutGTc1aTePOuQ3nd9pZCPjMbILzN2/YS265mZEQWfLkvJAjdx5LurTp0xpGoJSlNHXV1kthro4Jk8WpnheRA gN 4wuCWhbxaC81I03bvfcSNf1SS pnVfVAIJme4vDhtnRqnT5WqO3jS7z6Ys7a4lKn26g3FVwnZqVd460QzsnT6dLdH77 IURwqi796/P/ZnYcea/R1d9197wnoy08JwobfbMXsR5NUT yTkoC /0yZeeScONUgoTPag2HDIjJtdSgLO5NGB8x8WHxXj9bZhMSS lGJsKqoEowoh9qhDQTdmpV6N2PGEHI4YXugfagEdxJtFr1FFwV1d2SENZZKYw SWZIBFB15y/QWml1/OM6VdoGVywV7tvFWll2g14s2bZ IZJJ5wTsJlYnOggpiY2jMiJyTt8vmVJN36iadafaXqWZaHWFMYHm435cQ1c9TBmaJlWHrJnaIYWGklf1iAWiGCZFZbWZImV9Y2mc4rWqKmwUsonYLVWQ5iqr1IGqK 5hjpNr2fWmWmWXA3 2jrEFzJL5QAIAOw==

Qu'est-ce que c'est ? Il s'agit du schéma d'URI de données que Script House présentera aujourd'hui.

Actuellement, les types pris en charge par le schéma URI de données sont :

Copier le code

Le code est le suivant suit :

données :, données texte
données:texte/plain, données texte
données:texte/html, code HTML
données:texte/html; code HTML encodé
données:text/css,code CSS
données:text/css;base64,base64 code CSS encodé
données:text/javascript,code Javascript
données:text/javascript;base64 , code Javascript encodé en base64
données:image/gif;base64,données d'image gif encodées en base64
données:image/png;base64,données d'image png encodées en base64
données:image/jpeg;base64,base64 encodées données d'image jpeg
data:image/x-icon; base64, données d'image d'icône codées en base64
base64 en termes simples, elles traduisent certaines données 8 bits en caractères ASCII standard, qui peuvent être utilisés dans la fonction PHP base64_encode() effectue l'encodage.

Actuellement, les navigateurs IE8, Firefox, Chrome et Opera prennent tous en charge cette intégration de petits fichiers. Pour IE7 et les versions antérieures, le problème de compatibilité avec le schéma d'URI de données peut être résolu en utilisant MHTML.

À titre d'exemple

Une image sur une page Web peut être affichée comme ceci :

Copier le code

Le code est le suivant :

peut également être utilisé Affiché comme ceci :

Copiez le code

Le code est le suivant :

return false;
}

var reader = new FileReader();

reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = '

'; img_area.innerHTML = '

图片img标签展示：< ;/div>

'; }

}

2.2 pour HTML5 et FileReader pour base64 et base64

HTML5 Javascript 版本核心代码：
var file = this.files[0];
if(!/image/w /.test(file.type)){
alert("请确保文件为图像类型");
return false ;
>
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = '

';
img_area.innerHTML = '

图片img标签展示：

}}

Étiquettes associées：

encodage base64

source：php.cn

Article précédent：HTML5 Canvas JS contrôle la caméra sur votre ordinateur ou votre téléphone mobile instance_html5 compétences du didacticiel Article suivant：HTML5 ajoute des effets sonores au survol de la souris sans utiliser les compétences du didacticiel FLASH_html5

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur