キャンバス画像ソースの正確な中心を切り抜く

Question

アップロードしたファイルをキャンバス要素に受け取る入力フォームを作成しました。異なる画像が異なるサイズで表示されるため、アップロードされた画像はキャンバスのサイズに合わせて伸びます（400 * 350）。

アップロードされた画像の中心をキャンバスに収まるように、アップロードした画像の中心を自分のキャンバスのサイズの比率に合わせる方法を教えてください。

<input type='file' id="fileUpload" /> 
<canvas id="up_canvas" width="400" height="350" style="border: 1px solid red;"></canvas> 

<script> 
//get input as canvas 
function el(id){return document.getElementById(id);} 

var canvas_one = el("up_canvas"); 
var context_one = canvas_one.getContext("2d"); 

function readImage() { 
if (this.files && this.files[0]) { 
    var FR= new FileReader(); 
    FR.onload = function(e) { 
     var img = new Image(); 
     img.onload = function() { 
     context_one.drawImage(img, 0, 0, 400, 350); 
     }; 
     img.src = e.target.result; 
    };  
    FR.readAsDataURL(this.files[0]); 
} 
} 

el("fileUpload").addEventListener("change", readImage, false); 
</script> 

Answer 1

画像の特定の部分を描くために、あなたはdrawImage()機能で追加のパラメータを提供する必要があります。 9つの引数を指定して呼び出す場合は、void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);です。sはソースを表し、提供する画像のどの部分を描画するかを指定します。

サイズが400x350の四角形を常に切り抜きますが、sxとsyの属性を計算する必要があります。あなたのケースでは、このように画像を描きたい：

context_one.drawImage(img, 
         (img.width - 400)/2, // sx, 200 pixels to the left from center 
         (img.height - 350)/2, // sy, 175 pixels above center 
         400, 350, 0, 0, 400, 350); // sw, sh, dx, dy, dw, dh 

あなたはあまりにも小さい画像を提供している場合は、SXとSYのパラメータが負になります。そのような場合は次のように処理してください：

context_one.drawImage(img, 
         Math.max(0, (img.width - 400)/2), 
         Math.max(0, (img.height - 350)/2), 
         400, 350, 0, 0, 400, 350); // sw, sh, dx, dy, dw, dh