Convertisseur d'image base 64

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)