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:

Link: http://www.yusufdoru.com/demo/html-5-canvas-resim-boyutlandirma