Html canvas画像をアスペクト比で回転する

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

90度単位で画像を回転するには：

トランスレートとスケールを使用すると、トランスフォーメーションマトリックスを直接設定してイメージを回転できます。

• 、ベクトルbは
• 画素のx軸の方向と大きさを記述するC、画素Yの方向と大きさを表すベクトルをDは次のように引数は

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

  （0,0であろう）起源

の座標fを軸

すなわち、これらはすべてキャンバス画素COORDIでありますnates。デフォルトはa = 1,b =0ピクセルのx軸は1ピクセル、0は,d = 1 y軸0ピクセル横1ピクセル下、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);