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

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 :

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 :

À titre d'exemple

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

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标签展示：

';

}}