裁剪畫布圖像源的確切中心

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