裁剪画布图像源的确切中心

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