✔ Bild um x° drehen

Hi,

zahlreiche moderne Browser (ausser IE einschliessliche Version 7) unterstützen mittlerweile das canvas-Element (HTML5, siehe z.B. hier). Damit ist das Drehen ebenfalls möglich.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    objContext = objCanvas.getContext('2d');

    var objImg = new Image();
    // onload-Event vor dem Zuweisen der Quelle (wg. Opera)
    objImg.onload = function(){ rotateIt(objContext, objImg, 120);}
    objImg.src = "bild.jpg";  // Breite: 120 px, Höhe: 120px
  }else{
    // Sonstiger Code
  }
}


function rotateIt(objContext, objImg, lngPhi){
  objContext.translate(120, 120);           // Ursprung verschieben
  objContext.rotate((lngPhi*Math.PI/180));  // Context drehen
  objContext.drawImage(objImg, -60, -60);   // Bild zentriert zeichnen
}
 //-->
</script>
</head>
<body>
<button onclick="drawIt();">drawIt()</button>
<canvas width="240" height="240" id="canvas_id" style="border: 1px solid rgb(51, 51, 51);"><p>Ihr Browser unterstützt das canvas-Element leider nicht.</p></canvas>
</body>
</html>

Edit:
Offensichtlich macht der Cache im Opera dem Ganzen einen Strich durch die Rechnung - ist das Bild dort erstmal hineingewandert, feuert offensichtlich der onload-Event im Opera nicht mehr (oder zumindest zu spät). Folge - es wird das Bild nicht im canvas-Element angezeigt.

Lösung - einfach die Reihenfolge im Script ändern - erst den onload-Event notieren, dass die Quelle zuweisen.

Ciao
Quaese
 
Zuletzt bearbeitet:
Hi,

in welchem Browser hast du das gestestet?

Wie bereits erwähnt, unterstützt der IE das canvas-Element derzeit noch nicht.

Das Beispiel selbst funktioniert bei mir z.B. im Firefox ab Version 1.5.

Ciao
Quaese
 
Hi,

das Bild bild.jpg wird beim Betätigen des Buttons um 120° gedreht und in das canvas-Element gerendert.

Ciao
Quaese
 
Hi,

@Quaese: Nettes Feature - gleich in die Bookmarks kopiert :)

Nord-Süd-Richtung hat gesagt.:
ich habe deinen Code mal 1:1 übernommen. Es zeigt sich allerdings keine reaktion :(
Zum Vergrößern anklicken....
Nord-Süd-Richtung hat gesagt.:
ich nutze den FF v3.0.4.
Zum Vergrößern anklicken....
Dann dürfte bei dir die Grafikreferenz im JS-Code nicht stimmen, denn das Script verrichtet seinen Job bei mir im FF 1.5.x, 2.x, 3.x , NN 9, Safari 3.1.2 und Seamonkey 1.1.12 tadellos.

Die übrigen Browser (IE 5 bis 7, Mozilla 1.8b und Opera 9.6) melden mir entsprechend:
Ihr Browser unterstützt das canvas-Element leider nicht.
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück