HTML5 Canvas ile Oranlı Resim Boyutlandırma

Bugün bir javascript ile eklenti yazayım, ama  içinde de mutlaka HTML5‘le beraber gelen Canvas etiketi  olsun dedim ve işe koyuldum 🙂

Bu eklentide amaç; Canvas etiketini kullanarak bir resmi oranlı olarak büyütüp küçültmektir. Bunu aslında CSS ile bir satır kod ile halledebilirdik. Ama bazen sınırları zorlamak gerekebiliyor 🙂 Kodumuzun örneği aşağıdadır.

 

Örnek :

<script type="text/javascript">

window.onload = function(){
	Boyutlandir("image",1);
}

function Boyutlandir(id, oran) {
	var img = document.getElementById(id);
	img.src = img.getAttribute("original");

	var canvas = document.createElement("canvas");		
	canvas.width = img.width*oran;
	canvas.height = img.height*oran;

	canvas.getContext("2d").drawImage(img, 0, 0, img.width*oran, img.height*oran);

	img.src = canvas.toDataURL();  
}

</script>
<style type="text/css">
button:first-child{  margin-left:0; }
button{  margin-left:30px;  }
</style>
</head>

<body>

<div style="width:600px;">
    <div style=" height:450px;">
        <img src="foto.jpg" original="foto.jpg" id="image" /><br />

    </div>
    <div style="text-align:center;">
	    TIKLA :
        <button onclick="Boyutlandir('image',0.25)">25%</button>
        <button onclick="Boyutlandir('image',0.50)" style="margin-left:30px;">50%</button>
        <button onclick="Boyutlandir('image',0.75)">75%</button>
        <button onclick="Boyutlandir('image',1)">100%</button>
        <button onclick="Boyutlandir('image',1.25)">125%</button>
    </div>
</div>

</body>
</html>

 Açıklamalar:

4. satır :  1. parametre: body altındaki img etiketinin idsi. 2. parametre: resmin yeni oranı.

8. satır  :  body içindeki img etiketini hedefledik.

9. satır : Orjinal boyutlu resme tekrar dönüyoruz.

11. satır : Canvas nesnesini oluşturup, boyutlandırıyoruz.

15. satır: İlgili resmi bu satırda canvas elementine çizdirip boyutlandırıyoruz.

18. satır : toDataURL() fonksiyonu; şuna benzer “data:image/png;base64,iVBORw0″ resmin büyüklüğüne ve kalitesine bağlı olarak eşdeğer veri döndürüyor. Bunu img etiketinin yoluna atayarak oranına göre boyutlanmış resmi oluşturmuş oluyoruz.

Bunlar dışında; body altında bulunan butonlar ile “Boyutlandir” fonksiyonuna değişik oranlı parametreler göndererek amacımıza ulaşmış oluyoruz.

Demo:

Yayınlayan

Yusuf Doru

İstanbul'da yaşıyor. Web ve masaüstü ortamlarında çalışmalar yapıyor. Araştırıyor, geliştiriyor. Kendine ait kişisel blogu var. Her ne kadar .NET dillerine ilgisi olsa da, açık kaynaklı programlama dillerinde de kendini geliştirmeye devam ediyor.

“HTML5 Canvas ile Oranlı Resim Boyutlandırma” üzerine 3 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir