如何在FabricJS 1.7.21中将图片按比例缩放至指定宽度后添加到Canvas

没问题，我来帮你搞定这个手动猜缩放比例的麻烦事！核心思路就是根据图片原始尺寸计算出对应400px宽度的缩放比例，这样高度会自动按原始宽高比适配，完全不用手动调整。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid #dddddd;
        }
    </style>
</head>
<body>
    <label class="btn btn-default" id="imgLoader">
        <span class="oi oi-image"></span> Add Image<input type="file" hidden>
    </label>
    <canvas id="c"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var canvas = new fabric.Canvas("c");
        canvas.setHeight(616);
        canvas.setWidth(446);
        
        // New Photo to Canvas
        document.getElementById('imgLoader').onchange = function handleImage(e) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var imgObj = new Image();
                imgObj.src = event.target.result;
                imgObj.onload = function() {
                    var image = new fabric.Image(imgObj);
                    // 关键：计算适配400px宽度的缩放比例
                    const targetWidth = 400;
                    const scaleRatio = targetWidth / image.width;
                    
                    image.set({
                        left: 10,
                        top: 10,
                    }).scale(scaleRatio); // 使用计算出的比例替代固定值0.5
                    
                    canvas.add(image);
                }
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    </script>
</body>
</html>

关键修改说明 #

• 移除了固定的scale(0.5)，换成了动态计算的scaleRatio：targetWidth / image.width
• targetWidth设为你需要的400px，不管原始图片是宽是窄，都会被缩放到这个宽度，高度自动按原始比例调整
• 这样就完全不需要依赖外部图片缩放工具，上传后直接适配到你想要的尺寸

额外提示 #

如果担心图片宽度小于400px时被拉伸（比如小图放大），可以加个判断，只在图片原始宽度大于400px时才缩放：

const targetWidth = 400;
let scaleRatio = 1;
if (image.width > targetWidth) {
    scaleRatio = targetWidth / image.width;
}

这样小图就保持原始尺寸，大图缩放到400px宽度，更灵活~

内容的提问来源于stack exchange，提问作者anonymoose