Filtr obrazu : sepia

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	function sepia(img) {
	  var cv = document.getElementById("canvas");
	  var ctx = cv.getContext("2d");
	  //położenie obrazka na canvas
	  var imageX = 10;
	  var imageY = 10;
	  //pobranie obrazka
	  //var img = document.getElementById("aniolek");
	  //wymiary obrazka
	  var imageW = img.width;
	  var imageH = img.height;
	  //odrysowanie obrazka
	  ctx.drawImage(img, imageX, imageY);
	  //pobranie danych obrazka
	  var imageData = ctx.getImageData(imageX, imageY, imageW, imageH);
	 var data = imageData.data;
	 for (var i = 0; i < data.length; i += 4) {
	  var grey = 0.33 * data[i] + 0.56 * data[i + 1] + 0.11
		  * data[i + 2];
	  data[i] = grey + 100;
	  data[i + 1] = grey + 50;
	  data[i + 2] = grey;
	}
	ctx.putImageData(imageData, imageX, imageY);
	};
	var image = new Image();
	image.src = "https://opta.com.pl/wp-content/uploads/2019/09/pies.jpg";
	image.onload = function() {
		sepia(this);
	};
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *