Html畫布旋轉放大圖像的縱橫比

Question

我有一個代碼示例，我正在將大圖調整爲較小的大小，畫布與圖像大小相匹配。有一個旋轉右鍵功能，可以旋轉畫布內部的圖像，以調整畫布大小。我幾乎擁有完美的工作，但只有在原創或顛倒的情況下，圖像纔是完美的尺寸。當圖像左右旋轉時，我無法將高度設置爲正確的比例。這是我的jsfiddle和從不同的小提琴修改代碼的代碼。圖像僅用作測試。

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

任何幫助表示讚賞。

Answer 1

還記得你旋轉你的形象。在圖像繪製調用中使用交換的畫布寬度/高度時，您正在更改圖像的寬高比。通過計算，旋轉的原始圖像應該已經適合畫布。您製作的圖像也因此而拉伸。

使用ctx.drawImage(image, -canvasWidth*0.5, -canvasHeight*0.5, canvasWidth, canvasHeight);。

否則，您要繪製相同的圖像，然後使用畫布調用旋轉/翻譯它。但是你正在做的是在旋轉90°或270°時繪製不同尺寸的拉伸圖像，然後旋轉/平移它。

Answer 2

以90deg的步驟旋轉圖像。

而是使用平移和縮放可以通過直接設置轉換矩陣來旋轉圖像。

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

的參數是如下

• 的a，b的矢量描述的像素x軸
• c的方向和大小，ð描述像素y的方向和大小的矢量軸
• E，F的原點（其中，0,0會）

的座標，這些都是在畫布像素coordi納茨。缺省值爲a = 1,b =0像素的x軸橫跨1個像素，並且0下降，c = 0,d = 1 y軸0像素橫過並且一個像素下降，e = 0,f = 0起點位於左上角。

要將圖像順時針旋轉90度，您希望xAxis沿畫布向下，y軸從右向左移動。原點轉移到畫布的右上角。

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); 

由於您受到0.5比例，這意味着像素將是一半大小，並且爲您繪製的圖像你想要的原點，使圖像適合圖像。

// 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); 

您可以爲每個額外的旋轉做同樣的

// 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); 

每個旋轉的圖像尺寸如下

// 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; 

要恢復變換到剛剛設置轉換的默認到身份矩陣

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