Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5847 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120011 Image en noir et blanc vers la couleur | | Coucou Voir l'exemple ici - 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 } } |
| |