Convertisseur d'image base 64

Soyez le premier à donner votre avis sur cette source.

Vue 4 777 fois - Téléchargée 223 fois

Description

c'est une petite source que j'ai fait en explorant file api du html5 et qui finalement me sert a convertir des images en base 64 exploitable par le javascript ou le css, on choisi les images par un input file ou par drag & drop du bureau vers le navigateur le choix peut etre multiple, en sortie on se retrouve avec le nom de l'image suivit de la miniature de l'image puis d'un textearea contenant le fichier en base 64. il fonctionne avec firefox et chrome pour ie il faut utiliser la version beta de ie 10 pour opera seul le input fonctionne pas de drag & drop et ne fonctionne pas avec safarie.

page teste

Source / Exemple :

<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
.box{
 background-color:gray;
 height:100px;
 width:60%;
 margin:auto;
 border:1px ridge #aaa;
 -moz-box-shadow: 10px 10px 10px #212121;
 -webkit-box-shadow: 10px 10px 10px #212121;
 box-shadow: 10px 10px 10px #616161;
 text-align:center;
 }
textarea{
 width:100%;
 height:150px;
 margin:auto;
 }
#conteneur{
 width:60%;
 }
div{
 margin:auto;
 }
 </style>
 <script type="text/javascript">
 var compteur=0
 function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
 }
 function drop(e) {
  if (!e) {
   var fichier = document.getElementById('fileinput').files;
  }
  else {
   var fichier = e.dataTransfer.files;
  }
  charger(fichier)
 }
 function charger(fichier){
  if (fichier[compteur].type.match('image.*')) {
   var dv= document.createElement('div')
   var text = document.createTextNode(fichier[compteur].name)
   var imamage=document.createElement('img');
   imamage.style.height=40+'px'
   var rb= document.createElement('br')
   dv.appendChild(text);
   imamage=dv.appendChild(imamage);
   dv.appendChild(rb);
   var construction=document.createElement('textarea')
   var elmage= dv.appendChild(construction);
   document.getElementById('conteneur').appendChild(dv);
  }
  var charge=new FileReader();
  charge.readAsDataURL(fichier[compteur]);
  charge.onloadend = function(e){
   elmage.value = e.target.result;
   imamage.src=e.target.result;
   if (compteur<fichier.length-1) {
    compteur++;
    charger(fichier);
   }
   else{
    compteur=0;
   }
  }
 }
</script>
</head>
 <body>
 <div class='box'
 ondragenter="event.stopPropagation(); event.preventDefault();"
 ondragover="event.stopPropagation(); event.preventDefault();"
 ondrop="event.stopPropagation(); event.preventDefault(); drop(event);">
 boite a drop
 </div>
 <br>
 <div>
 <input type='file' multiple='multiple' id='fileinput'>
 <input type='button' id='btnLoad' value='Load' onclick='drop();'>
 </div>
 <br>
 <div id='conteneur'></div>
 </body>
 </html>

Conclusion :

utile

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_andree46
Messages postés
2
Date d'inscription
lundi 10 septembre 2007
Statut
Membre
Dernière intervention
16 février 2012
-
salut
cela peut sembler trivial aux pros.
Pour le débutant c'est en 100 lignes d'html et js la solution pleinement opérationnelle et au combien mille fois plus praticable que les solutions online, les logs plus ou moins fiables ou les bidouillage comme passer par un .MHT

Cela mérite grand merci
ANdré
@karamel
Messages postés
1721
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
8 novembre 2019
49 -
je vient d'y ajouter la visualisation des images sous forme de miniature a cote du nom

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.