Html Leinwand drehen größeres Bild mit Seitenverhältnis

Question

Ich habe ein Codebeispiel, wo ich ein großes Bild auf eine kleinere Größe mit der Leinwand anpassen die Größe des Bildes anpassen. Es gibt eine Funktion zum Drehen nach rechts, mit der das Bild innerhalb der Leinwand gedreht wird, wodurch die Leinwandgröße angepasst wird. Ich habe es fast perfekt funktioniert, aber das Bild ist perfekte Größe nur im Original oder auf dem Kopf. Ich kann das Verhältnis nicht richtig einstellen, wenn das Bild nach links oder rechts gedreht wird. Hier ist meine Jsfiddle und Code, der Code von einer anderen Geige geändert wird. Das Bild wird nur als Test verwendet.

var canvas=document.getElementById("canvas"); 
 
    var ctx=canvas.getContext("2d"); 
 
    var canvasWidth = 400; 
 
    var canvasHeight; 
 

 
    var degrees=0; 
 

 
    var image=document.createElement("img"); 
 
    image.onload=function(){ 
 
    canvas.width = canvasWidth; 
 
    canvasHeight = 400/(image.width/image.height); 
 
    canvas.height = canvasHeight; 
 
    ctx.drawImage(image,0,0,canvas.width,canvas.height); 
 
    } 
 
    
 

 
    image.src="https://www.magezinepublishing.com/equipment/images/equipment/Lumix-DMCFZ330-5824/highres/Panasonic-Lumix-FZ330-Wide-P1010001_1438873612.jpg"; 
 

 

 
    $("#clockwise").click(function(){ 
 
    degrees+=90 
 
    if (degrees >= 360) degrees = 0; 
 
     
 
    if (degrees === 0 || degrees === 180) { 
 
     canvas.width = canvasWidth; 
 
     canvas.height = canvasHeight; 
 
    } 
 
    else { 
 
     // swap 
 
     canvas.width = canvasHeight; 
 
     canvas.height = canvasWidth; 
 
    } 
 
    ctx.save(); 
 
    // you want to rotate around center of canvas 
 
    ctx.translate(canvas.width/2,canvas.height/2); 
 
    
 
    ctx.rotate(degrees*Math.PI/180); 
 
    ctx.drawImage(image, -canvas.width*0.5, -canvas.height*0.5, canvas.width, canvas.height); 
 
    ctx.restore(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" ></canvas><br> 
 
    <button id="clockwise">Rotate right</button>

jsfiddle

Jede Hilfe ist willkommen.

Answer 1

Erinnern Sie sich, drehen Sie Ihr Bild. Sie ändern das Seitenverhältnis des Bilds, wenn Sie die Breite/Höhe des vertauschten Grafikbereichs im Bildaufruf verwenden. Nach Ihren Berechnungen sollte das ursprüngliche Bild, gedreht, bereits auf die Leinwand passen. Das Bild, das du produzierst, ist deswegen auch gestreckt.

Verwendung ctx.drawImage(image, -canvasWidth*0.5, -canvasHeight*0.5, canvasWidth, canvasHeight);.

Else sagte, Sie möchten das gleiche Bild zeichnen, dann drehen/übersetzen es mit Leinwandaufrufen. Aber was Sie tun, ist ein verschieden großes, gestrecktes Bild zu zeichnen, wenn es um 90 ° oder 270 ° gedreht wird, und dann das zu drehen/übersetzen.

Answer 2

Um ein Bild in 90deg Schritten zu drehen.

Statt der Verwendung der Übersetzung und Skalierung können Sie das Bild drehen, indem Sie die Transformationsmatrix direkt einstellen.

ctx.setTransform(a,b,c,d,e,f); 

Die Argumente sind wie folgt

• a, b der Vektor der Beschreibung, die Richtung und die Größe eines Pixel x-Achse
• c, d der Vektor die Richtung und die Größe eines Pixel y Beschreiben Achse
• e, f die der Ursprungskoordinate (mit 0,0 sein wird)

Alle diese sind in Leinwandpixel Coordi nates. Der Standardwert ist a = 1, b =0 x Achse eines Pixels ist 1 Pixel über und 0 abwärts, c = 0, d = 1 Y-Achse 0 Pixel über und ein Pixel nach unten, e = 0, f = 0 Ursprung oben links.

Um das Bild um 90 Grad im Uhrzeigersinn zu drehen, möchten Sie, dass xAxis die Leinwand und die y-Achse von rechts nach links verläuft. Der Ursprung wird nach oben rechts auf der Leinwand verschoben.

ctx.setTransform(
    0,1, // x axis down 
    -1,0 // y axis from left to right 
    ctx.canvas.height, // origin x and y to top right 
    0, 
) 
ctx.drawimage(image,0,0); 

Wie Sie 0,5 skalieren dies bedeutet, dass die Pixel wird die Hälfte der Größe, und wie Sie ein Bild zeichnen wollen Sie den Ursprung, so dass das Bild, das Bild passt.

// rotate image 90 deg and scale 0.5 
ctx.setTransform(
    0,0.5, // x axis down 
    -0.5,0 // y axis from left to right 
    image.height * 0.5, // origin x and y to top right 
    0, 
) 
ctx.drawimage(image,0,0); 

Sie können für jede weitere Drehung das gleiche tun

// rotate 180 scale 0.5 
ctx.setTransform(-0.5,0,0,-0.5, image.width * 0.5,image.height * 0.5); 
// rotate -90 scale 0.5 
ctx.setTransform(0,-0.5,0.5,0, 0,image.width* 0.5); 

Die Bildabmessungen für jede Drehung wird wie folgt

// for 0deg and 180 deg rotation 
canvas.width = image.width * 0.5; 
canvas.width = image.height * 0.5; 

// for 90deg and -90 deg rotation 
canvas.width = image.height * 0.5; 
canvas.width = image.width * 0.5; 

auf die Standardeinstellung der Transformation wiederherzustellen setzen nur die Transformation zur Identitätsmatrix

ctx.setTransform(1,0,0,1,0,0);