javascript - 裁剪 Canvas 图像源的确切中心

Question

我制作了一个输入表单，用于将上传的文件接收到 Canvas 元素中。因为不同的图像具有不同的尺寸，所以上传的图像总是被拉伸(stretch)以适合我的 Canvas 尺寸，即 400 * 350。

如何根据我的 Canvas 大小的比例裁剪上传图像的确切中心，以便将上传的图像适合 Canvas 。

<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