Dokumentation (canvas.quaese.de)

Bilder zeichnen - drawImage (slice)

Die Slice-Variante der Methode drawImage dient dazu, den Ausschnitt aus einem Bild- oder Canvaselement in den Kontext zu rendern. Die Ausgabegrösse kann durch die Angabe von zwei Parametern dw und dh angepasst werden. Mit Hilfe dieser Methode kann also eine Skalierung des Ausschnitts erfolgen.

Weil sich die beiden Versionen (Bild/Canvas) nur im ersten Parameter (Typ der Quelle) unterscheiden, wird nur eine Variante behandelt. Sofern nicht anders angegeben, verhält sich die andere Methode analog.

drawImage

void drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
void drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)

In der ~~Scale-~~ Slice-Variante erwartet die Methode neun Parameter. Der Startbuchstabe s steht für Source (Quelle), d für Destination (Ziel).

Mein Dank gilt Marc Stepkowski, der mich auf den Dreher zwischen Scale und Slice in der Beschreibung hingewiesen hat.

Parameter

image / canvas - Quellelement, das in den Kontext gerendert werden soll

sx - x-Koordinate der linken oberen Ecke des Ausschnitts im Quellelement

sy - y-Koordinate der linken oberen Ecke des Ausschnitts im Quellelement

sw - Breite des Ausschnitts im Quellelement

sh - Höhe des Ausschnitts im Quellelement

dx - x-Koordinate der linken oberen Ecke im Kontext

dy - y-Koordinate der linken oberen Ecke im Kontext

dw - Breite des Elements im Kontext

dh - Höhe des Elements im Kontext

Schematische Darstellung

Die Abbildung zeigt wie der Ausschnitt aus einem Quellelement (Bild/Canvas) mit neuen Abmessungen (Breite/Höhe) in einen Kontext gerendert wird.

drawImage() - slice

Beispiel

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  var objImg = document.getElementById("imgID");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    // Neues Bild unter bisherigen Inhalt anordnen
    objContext.globalCompositeOperation = "destination-over";

    // Bildausschnitt in vier unterschiedlichen Grössen in Kontext rendern
    for(var i=4, j=1; i>0; i--, j++){
      // Bildausschnitt in Kontext einfügen
      objContext.drawImage(objImg, 90, 55, 155, 120,  j*10, j*10, parseInt(objImg.width/i), parseInt(objImg.height/i));
    }
  }else{
    // Sonstiger Code
  }
}

window.onload = function(){ drawIt();}

Erläuterung

Als erstes wird mit der Methode getElementById ein Bildobjekt aus dem Dokument referenziert und der Variablen objImg zugewiesen. In einer for-Schleife wird in jedem Durchlauf ein Ausschnitt aus dem Quellelement in den Kontext gezeichnet. Die Grösse der gerenderten Grafiken wächst mit jeder Iteration an. Zur besseren Anschaulichkeit werden die Bilder zusätzlich horizontal und vertikal verschoben.