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

ゝ一纸荒年。 2023-10-02 11:08 11阅读 0赞

**缩放以适应**

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

**缩放以填充**

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

示例缩放以适合

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);
    }

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