html5-canvas 图片缩放图像以适合或填充

缩放以适应

意味着整个图像将可见，但如果图像与画布的外观不同，则侧面或顶部和底部可能会有一些空白空间。该示例显示了缩放以适合的图像。侧面的蓝色是由于图像与画布的外观不同。

缩放以填充

意味着缩放图像，以便图像覆盖所有画布像素。如果图像方面与画布不同，则图像的某些部分将被剪裁。该示例显示了缩放以填充的图像。请注意图像的顶部和底部是如何不再可见的。

示例缩放以适合

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

示例 缩放填充

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

这两个函数之间的唯一区别是获取比例。拟合使用最小拟合比例，填充使用最大拟合比例。