Cette page se décline en 3 versions

Choisissez l'effet désiré :

Effet désiré

Passage en sépia en JavaScript

En photographie, le sépia est une qualité de tirage qui ressemble au noir et blanc, mais avec des variations de brun, et non de gris. La couleur sépia dans le système RVB est S(94, 38, 18).

Dans la transformation d'une image couleur en une image en nuances de sépia, on tient compte d'un seuil (0 < $\text{seuil}$ < 255), qui sépare le sépia assombri et le sépia éclairci. La transformation se fait alors pixel par pixel en deux temps. Pour chaque pixel, on calcule d'abord un niveau de gris qui est la moyenne $m$ des intensités de rouge, vert et bleu. Puis, si le gris obtenu est foncé ($m$ < $\text{seuil}$), on le remplace par une couleur du segment $\text{NS}$, couleur d'autant plus proche du noir que $m$ est petit. Si le gris est plus clair ($m$ > $\text{seuil}$), il est remplacé par une couleur du segment $\text{SB}$, couleur d'autant plus proche du blanc B que $m$ est grand.

Code à modifier

for(var K=0,l=imageDataSource.data.length;K<l;K=K+4){
			imageDataSource.data[K];
			ancien_rouge=imageDataSource.data[K];
			ancien_vert=imageDataSource.data[K+1];
			ancien_bleu=imageDataSource.data[K+2];
			transparence=imageDataSource.data[K+3];

//Partie a modifier - definition des nouvelles couleurs de la nouvelle image
			gris=0.2126*ancien_rouge+0.7152*ancien_vert+0.0722*ancien_bleu;
			seuil=100;
			if (gris<seuil)	{
				k = gris/seuil
				nouveau_rouge=k*94;
				nouveau_vert=k*38;
				nouveau_bleu=k*18;
					}
			else		{k = (gris-seuil) / (255-seuil);

nouveau_rouge=94 + k*(255-94);
				nouveau_vert=38 + k*(255-38);
				nouveau_bleu=18 + k*(255-18);
					}
    //Fin de a partie a modifier

imageDataResult.data[K]=nouveau_rouge;
			imageDataResult.data[K+1]=nouveau_vert;
			imageDataResult.data[K+2]=nouveau_bleu;
			imageDataResult.data[K+3]=transparence; 
		}
		ctx.putImageData(imageDataResult,0,0); 
	}
</script>

btnModifie.onclick=modifie;
btnretour.onclick=retour;

var image = document.getElementById("monImage");
var canvas = document.getElementById("monCanvas");

var ctx = canvas.getContext("2d");

image.onload=function(){
		canvas.width=image.width;
		canvas.height=image.height;
		ctx.drawImage(image,0,0);
		imageDataSource = ctx.getImageData(0, 0,image.width,image.height);
	}

function conversion(x,y){
		return (y*image.width+x)*4;	
	}

function retour(){
		var imageDataResult=ctx.createImageData(image.width,image.height);
		var posSrc,posDest;
		for(var y=0,h=image.height;y<h;y++){
			for(var x=0,w=image.width;x<w;x++){
				posSrc=conversion(x,y);
				posDest=conversion(x,y);
				for(var i=0;i<4;i++)imageDataResult.data[posDest+i]=imageDataSource.data[posSrc+i];

}
		}

ctx.putImageData(imageDataResult, 0, 0); 
	}
</script>

.bouton:hover{
	position: relative;
	width: 210px;
	line-height: 28px;
	display: inline-block;
	margin: 0 0 0 60px;
	padding: 0 2px;
	text-decoration: none;	
	color: #FFFFFF;
    	border: 2px solid #FFFFFF;
	border-radius: 12px;
	background: #1d1f1e;
	box-shadow: 4px 2px 5px #1d1f1e,
                0 -1px 0 white;
}
</style>
</body>
</html>

Algorithmique et traitement de l'image

Cette page se décline en 3 versions

Passage en sépia en JavaScript

Code à modifier

Image rendue