Noire et blanc vers couleur

Soyez le premier à donner votre avis sur cette source.

Vue 5 316 fois - Téléchargée 532 fois

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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
dAbzik

la formule que tu a donné fonctionne bien sa rend plus claire mais du coup je suis perdu car la formule que j'utilise qui est il faut l'avoué simpliste fonctionne elle aussi bien

plarts

sa fonctionne bien sur chrome 22 mais pour chrome il faut imperativement que le script soit en ligne ca ne marchera pas en local

normalement sa doit pouvoir marcher avec ie 9 malheureusement je suis sur xp et comme ie 9 ne fonction pas sur xp je n'ai pu faire le teste
Messages postés
37
Date d'inscription
vendredi 20 février 2004
Statut
Membre
Dernière intervention
25 mars 2013

Pourquoi ca ne fonctionne pas sous IE9 et Chrome,
Ca fonctionne sous firefox et Safari.
Il me semble que HTML5 n'zest pas encore supporté corectement par IE9 ?

Ou alors je n'ai pas les bonnes versions (sous windows) ?
IE9 : 9.0.8112
Chrome : 24.0.1290.1 dev-mome
Firefox : 15.0.1
Safari : 5.1.7
Bonjour,

il est plus correct de se servir du théorème de Pythagore pour calculer le gris, plutôt que de faire la somme des couleurs divisée par 3 :

var noireblanc = (r+g+b)/3;

est à remplacer par :

var noireblanc = Math.sqrt((r*r)+(g*g)+(b*b)) / Math.sqrt(3);
Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
27 juin 2020
79
c'est un problème connue sur code source on a beau mettre l"adresse du lien correctement il il a toujours un espace qui s’insère
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017

salut

Pourquoi ajoutes Tu inutilement un espace à tes lien de teste???

Le lien accessible:
http://scriptevol.toile-libre.org/scriptsite/coulblanc/nbcoul.html

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.