hallo,
wie drehe/rotiere ich ein img-element mit js/php?
habe bisher ohne erfolg nach einer guten möglichkeit gesucht, ein bild zu drehen.
das neue canvas-element ist toll, allerdings machen die alten IEs da ein strich durch die rechnung.
man kann natürlich für jeden drehungsschritt ein eigenes bild mit photoshop, gimp o.ä. erzeugen und dann per js die src ändern. aber vorgestern bin ich über die imagerotate-funktion der gd-lib gestoßen und habe versucht, es damit hinzukriegen (siehe code unten).
vorweg:
- habe zwecks überschaubarkeit auf eine verallgemeinerung meiner funktion rotiere() mittels parameter-übergabe verzichtet
- die funktion ist zum drehen quadratischer bilder gedacht, kann aber natürlich mit etwas gerechne modifiziert (u. verallgemeinert) werden
- das bild, das ich drehe, hat die maße 50x50 px;
- ID(id) steht für: document.getElementById('id') - IDy(id) steht für: document.getElementById('id').style
- bitte nur konstruktive kritik - bin ein noob in den bereichen html, js, php. js kenne ich seit wenigen monaten, php seit 2 wochen und die gd-lib seit vorgestern; mir ist also klar, dass mein script stümperhaft ist ;}
- werde bei gelegenheit eine zeichnung zur veranschaulichung hinzufügen - falls interesse da ist und meine funktion nicht als schrott erkannt wird ^^
<html>
<head>
<title>rotate image with js and gd</title>
<style>
input {position:absolute; left:50px;}
#bild {position:absolute; left:200px; top:200px;}
</style type="text/css">
<script language="JavaScript" type="text/javascript" src="Muster-Scripte/IDy.js"></script>
<script type="text/javascript">
var deg = 0;
function rotiere() {
if (deg < 360)
{
deg += 5;
if (deg != 90 && deg != 180 && deg != 270 && deg != 360)
{
var moddeg = deg % 90;
} else {
var moddeg = 90;
}
var ankat = 50 * Math.cos(moddeg * Math.PI / 180);
var gegkat = 50 * Math.sin(moddeg * Math.PI / 180);
if (deg != 90 && deg != 180 && deg != 270 && deg != 360)
{
var newWidth = Math.floor(ankat + gegkat) + 1;
} else {
var newWidth = ankat + gegkat;
}
if (deg <= 90)
{
var newLeft = Math.round(-newWidth + ankat/2 + 225);
var newTop = Math.round(-newWidth + gegkat/2 + 250);
}
if ((deg > 90) && (deg <= 180))
{
var newLeft = Math.round(-newWidth + gegkat/2 + 225);
var newTop = Math.round(-ankat/2 + 250);
}
if ((deg > 180) && (deg <= 270))
{
var newLeft = Math.round(-ankat/2 + 225);
var newTop = Math.round(-gegkat/2 + 250);
}
if ((deg > 270) && (deg <= 360))
{
var newLeft = Math.round(-gegkat/2 + 225);
var newTop = Math.round(-newWidth + ankat/2 + 250);
}
bildSrc = 'drehstern.php?grad='+deg;
ID('bild').src = bildSrc;
IDy('bild').left = newLeft + 'px';
IDy('bild').top = newTop + 'px';
setTimeout('rotiere(5)',5);
}
else {deg = 0;}
}
</script>
</head>
<body>
<h1>GD-image einbinden</h1>
<input type="button" value="Rotiere den Stern" onclick="javascript:rotiere()" />
<div>
<img src="drehstern.php" id="bild" />
</div>
</body>
</html>
drehstern.php
<?php
header('Content-type: image/png');
$pic = 'bilder/stern.jpg';
$grad = $_REQUEST["grad"];
$quelle = imagecreatefromjpeg($pic);
$bgfarbe = imagecolorallocate($quelle, 255, 255, 255);
$rotate = imagerotate($quelle, $grad, $bgfarbe);
imagepng($rotate);
imagedestroy($quelle);
imagedestroy($rotate);
?>
die rotation ist beim ersten drücken des buttons etwas ruckelig, bei allen folge-drücken dann aber i.o.
kann mir jemand erklären, woran das liegt?
freue mich über jede konstruktive kritik und auch über anregungen/hinweise/links dazu, wie man eleganter bilder drehen könnte (ohne bibliotheken).
vielen dank,
ein neuling