Noire et blanc vers couleur

Télécharger le projet
Commenter

Description

un petit script qui fait la transition d'une image en noir et blanc vers la meme en couleur

la particularité du script c'est que l'on utilise uniquement une image en couleur, l'image en noir et blanc est quand a elle cree a la volé a l'aide de canvas

ne fonctionne pas avec ie<9 car j'utilise canvas et pour chrome le teste doit etre fait en ligne je rajoute donc un lien teste

page teste

Source / Exemple : 

function nbcoul(elem,ima){

 this.inter=null,
 this.bb=1
 this.imacibleb=null
 this.conte=document.getElementById(elem)
 this.ima=ima
 var that=this
 
 ///////////////////////////
 //partie fading /////////
 //////////////////////////

 this.nbsta=function(){
  
  clearInterval(that.inter)
  that.inter=setInterval(that.nbfadec,25);
 }

 this.nbsto=function(){
  
  clearInterval(that.inter)
  that.inter=setInterval(that.nbfaden,25);
 }

 this.nbfadec=function() {

  that.imacibleb.style.opacity = that.bb;
  that.bb+=0.1
  if(that.bb>1){
   clearInterval(that.inter)
   return false
  }
 }

 this.nbfaden=function() {

  that.imacibleb.style.opacity = that.bb;
  that.bb-=0.1
  if(that.bb<0){
   clearInterval(that.inter)
   return false
  }
 }
 this.nb()
}

////////////////////////////////////////////////
//partie creation de l'image en noir et blanc//
//////////////////////////////////////////////

nbcoul.prototype.nb = function() {

 var moncanvas2=document.createElement('canvas');  //creation d'un canvas a l'interieur d'une variable local
 var moncanvas2d=moncanvas2.getContext('2d');
 var that=this
 
 var ima = new Image();  //prechargement de l'image a visualisé
 ima.src = this.ima;
 ima.onload = function () {
  
  moncanvas2.width=ima.width;  //le canvas prend la taille de l'image
  moncanvas2.height=ima.height;
  moncanvas2d.drawImage(ima,0,0);  //on dessine l'image dans le canvas
  
  var largeur=ima.width;
  var hauteur=ima.height;
  var idata = moncanvas2d.getImageData( 0, 0, largeur, hauteur); //on recupere les donnés brute de l'image
  var data = idata.data;
  
  for(var i = 0; i < data.length; i+=4){  //traitement des pixels afin de cree l'image en noir et blanc 
   var r = data[i];
   var g = data[i+1];
   var b = data[i+2];
   var noireblanc = (r+g+b)/3;
   data[i] = noireblanc;
   data[i+1] = noireblanc;
   data[i+2] = noireblanc;
  }
  
  idata.data = data;
  moncanvas2d.putImageData(idata, 0, 0);  //on redessine l'image dans le canvas
  
  that.conte.style.height=hauteur+"px"
  that.conte.style.width=largeur+"px"
  
  var base64 = moncanvas2.toDataURL("image/jpg");  //on converti en jpg l'image que l'on enregistre dans une variable 
  var construction=document.createElement('img');  //on cree une balise image et on lui donne comme src la variable contenant l'image
  construction.src=base64;
  construction.style.position="relative"
  construction.style.marginTop=-hauteur+"px"
  construction.style.opacity=1
  construction.onmouseout=that.nbsta
  construction.onmouseover=that.nbsto
  that.imacibleb=that.conte.appendChild(construction);
 }
}

window.addEventListener('load', init, false);
function init(){   //nom des image

 var tbmage=new Array('grenouille.jpg','papillon.jpg','papillon2.jpg','papillon3.jpg','lezard.jpg','lezard2.jpg','iguane.jpg','houe.jpg')
 
 var chemin='images/'  // chemin des images

 for(var i = 0; i < tbmage.length; i++){
  new nbcoul('divgem'+i,chemin+tbmage[i]);  //creation d'instance le nom de chaque div est precisé ainsi que le chemin de chaques images en relation avec le div
 }
}

Conclusion :

a tester
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)