Forum d'entraide Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum d'entraide Crea illusion Fantasy

Aides, Conseils, Forum, Sites web, blogs, tout supports, Graphismes, Tutoriels, Publicités.


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Image en noir et blanc vers la couleur

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 5001
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10543
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Image en noir et blanc vers la couleur Ven 8 Déc 2017 - 20:10

Coucou

[Vous devez être inscrit et connecté pour voir ce lien]

Code:
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
 }
}
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Image en noir et blanc vers la couleur

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» que l'image face un lien vers la rubrique
» Insertion d'une image a la place de la couleur du Fond En-tête Catégorie.
» Mettre une image à la place de la couleur
» Image à la place d'une couleur
» Insérer un image à la place d'une couleur de fond.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum d'entraide Crea illusion Fantasy :: Caverne d'Alibaba du forum :: Créer-