Javascript ile resim döndürmek (image rotating)

Javascript ile resim döndürmek (image rotating)

Javascript ile resim döndürmek mümkün müdür ? Tabi ki. Bu makaleyi takip ederek Javascript ile resimleri nasıl döndüreceğinizi öğrenebilirsiniz.

En kolay işle başlayalım. Aşağıdaki satırlar ekleyelim :

<img src="/article-sources/images/plane-1.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>

Yukarıda döndüreceğimiz resmi CANVAS (döndürülen resmi görüntülemek için kullanılacak) tagımıza ekliyoruz. CANVAS tag sadece Chrome, FF, Opera, Chrome IE8 ve Safari tarafından desteklniyor. IE6 VE IE7 CANVAS desteklemiyor.

Şimdi resmi nasıl döndüreceğimizi inceleyelim. Güncel tarayıcıların bir çoğu <canvas> nesnesini destekliyor aslında 2D context içindeki ‘rotate’ ve ‘drawimage’ metodlarının kullanımına izin veriyorlar. IE6 ve IE7 ise bu tagı tanımıyor. Bu nedenle Microsoft “DXImageTransform.Microsoft.BasicImage” üzerinde geliştirme yaparak rotation (döndürme) metodu ortaya çıkardı (Link : http://msdn.microsoft.com/en-us/library/ms532918%28VS.85%29.aspx).  İyi haber  kullanımı basit fakat sadece dört açı (0, 90, 180 ve 270 açıları) desteklemesi bir handikap olarak karşımıza çıkıyor.  IE Resim döndürme kodu aşağıdaki gibidir  :

//  DXImageTransform.Microsoft.BasicImage  MSIE Kullanımı
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

CANVAS tagını destekleyen tarayıcılarda ki kullanım şekli ise aşağıdaki gibidir :

var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;

//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}

//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

X/Y kordinatlarını değiştirmek için drawImage fonksiyonunu kullanmak zorundayız. Kolay gelsin.

Kodların Son Hali :

HTML : 

<div id=”page”>
<h1>How to Rotate Images using JavaScript</h1>

<div>
<img src=”image/prvTwin Sunset.jpg” alt=”” id=”image” width=”150″ />
<canvas id=”canvas”></canvas>
</div>
<p>
<strong>Rotate Image: </strong>
<a href=”javascript:;” id=”resetImage”>Reset Image</a>
<a href=”javascript:;” id=”rotate90″>90</a>
<a href=”javascript:;” id=”rotate180″>180</a>
<a href=”javascript:;” id=”rotate270″>270</a>
</p>

</div>

JS :

<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>

<script type=”text/javascript”>
var img = null, canvas = null;

$(document).ready(function () {
// Initialize image and canvas
img = document.getElementById(‘image’);
canvas = document.getElementById(‘canvas’);

if (!canvas || !canvas.getContext) {
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = ‘absolute’;
img.style.visibility = ‘hidden’;
}
rotateImage(0);

// Handle clicks for control links
$(‘#resetImage’).click(function () { rotateImage(0); });
$(‘#rotate90’).click(function () { rotateImage(90); });
$(‘#rotate180’).click(function () { rotateImage(180); });
$(‘#rotate270’).click(function () { rotateImage(270); });
});

function rotateImage(degree) {
if (document.getElementById(‘canvas’)) {
var cContext = canvas.getContext(‘2d’);
var cw = img.width, ch = img.height, cx = 0, cy = 0;

// Calculate new canvas size and x/y coorditates for image
switch (degree) {
case 90:
cw = img.height;
ch = img.width;
cy = img.height * (-1);
break;
case 180:
cx = img.width * (-1);
cy = img.height * (-1);
break;
case 270:
cw = img.height;
ch = img.width;
cx = img.width * (-1);
break;
}

// Rotate image
canvas.setAttribute(‘width’, cw);
canvas.setAttribute(‘height’, ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);
}
else {
// Use DXImageTransform.Microsoft.BasicImage filter for MSIE
switch (degree) {
case 0: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=0)’; break;
case 90: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=1)’; break;
case 180: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=2)’; break;
case 270: image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=3)’; break;
}
}
}
</script>

DEMO

Kaynak : http://www.ajaxblender.com/howto-rotate-image-using-javascript-canvas.html

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

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