[javascript] Me-rotasi gambar menggunakan elemen canvas
21 07 2008Element CANVAS atau tag canvas di keluarga HTML bisa di katakan anggota baru, berguna untuk menggambar grafik menggunakan javascript.
Tag <canvas> mendefinisikan grafik seperti graph atau image.
Pada postingan berikut ini akan menjelaskan tentang bagaimana menggunakan element canvas untuk merotasi sebuah gambar, rotasi pada 90, 180, -90, dan kembali ke 0.
Contoh nya :
rotate:
Dan berikut ini script lengkap nya :
rotasi.js
/*
Ok!: Firefox 2, Safari 3, Opera 9.5b2
No: Opera 9.27
*/
var image = document.getElementById(‘image’);
var canvas = document.getElementById(‘canvas’);
var canvasContext = canvas.getContext(‘2d’);
switch(p_deg) {
default :
case 0 :
canvas.setAttribute(‘width’, image.width);
canvas.setAttribute(‘height’, image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, 0);
break;
case 90 :
canvas.setAttribute(‘width’, image.height);
canvas.setAttribute(‘height’, image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, -image.height);
break;
case 180 :
canvas.setAttribute(‘width’, image.width);
canvas.setAttribute(‘height’, image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, -image.height);
break;
case 270 :
case -90 :
canvas.setAttribute(‘width’, image.height);
canvas.setAttribute(‘height’, image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, 0);
break;
};
} else {
/*
Ok!: MSIE 6 et 7
*/
var image = document.getElementById(‘image’);
switch(p_deg) {
default :
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 :
case -90 :
image.style.filter = ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=3)’;
break;
};
};
};
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
var image = document.getElementById(‘image’);
var canvas = document.getElementById(‘canvas’);
if(canvas.getContext) {
image.style.visibility = ‘hidden’;
image.style.position = ‘absolute’;
} else {
canvas.parentNode.removeChild(canvas);
};
rotate(0);
});
html nya :
<p>
rotate:
<input type="button" value="0°" onclick="rotate(0);">
<input type="button" value="90°" onclick="rotate(90);">
<input type="button" value="180°" onclick="rotate(180);">
<input type="button" value="-90°" onclick="rotate(-90);">
</p>
<p>
<img id="image" src="images/wanitapeace.jpg" alt="">
<canvas id="canvas"></canvas>
</p>
Refrensi :
http://www.w3schools.com/
http://javascript.internet.com/
- Menambah Javascript pada Javascript Suatu ketika ketika saya sedang ngoding web, saya menghadapi keadaan...
- [Javascript] Validasi dalam javascript Awalnya saya bingung bagaimana melakukan proses validasi suatu radio button...
- Mendapatkan value dari Window pop up pada HTML Berikut ini tips untuk mendapatkan nilai dari window pop up,...
- [Delphi] Virtual Key Codes Virtual Key Codes adalah kode hexa pada kibor ketika di...
- [Javascript] Multiple Dimensional Arrays Pokok ulasan yang kan di bahas kali ini adalah javascript...
Recent Comments